next js一些基本的疑問

react next nextjs node.js

超級前端人 2023-02-10 14:21:06 ‧ 1243 瀏覽

分享至

我知道nextjs可以有[id].jsx這個頁面，但是只能是數字，比如說localhost/post/34，請問是否有辦法可以做出像是github profile一樣，像是https://github.com/myaccount，類似這樣子。

alien663 iT邦研究生 3 級 ‧ 2023-02-10 17:05:24 檢舉

restful API了解一下，前端的Routing機制也可以這樣跑。
https://nextjs.org/docs/api-routes/dynamic-api-routes

超級前端人 iT邦新手 3 級 ‧ 2023-02-11 02:14:44 檢舉

但是我不希望有`/api`前綴，請問有什麼辦法可以用掉嘛

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

凱恩Kane

iT邦新手 5 級 ‧ 2023-02-12 18:17:36

最佳解答

可以參考一下 NextJS Dynamic Routing

如果要像是 Github 那樣可以從根目錄建立一個動態路徑

檔案長這樣：pages/[id].js => https://github.com/Gary50613

如果希望使用者名稱後面還有東西可以用資料夾的方式
pages/[id]/settings.js => https://github.com/Gary50613/settings

回應
分享
檢舉

登入發表回應

janlin002

iT邦好手 1 級 ‧ 2023-02-10 14:54:54

https://nextjs.org/docs/routing/introduction

感覺是只要在 pages 下面創一個叫 myaccount 的 file？

回應 1
分享
檢舉

超級前端人 iT邦新手 3 級 ‧ 2023-02-11 02:13:31 檢舉

不是的，是一個類此dynamic routers

登入發表回應

JamesDoge

iT邦高手 1 級 ‧ 2023-02-11 10:42:23

import React from 'react';

const UserProfile = ({ username }) => {
  return (
    <div>
      <h1>Hello {username}!</h1>
    </div>
  );
};

UserProfile.getInitialProps = async ({ query }) => {
  return { username: query.username };
};

export default UserProfile;

然後，您可以使用以下 URL 訪問該頁面：

http://localhost:3000/myaccount