一、項目創(chuàng)建
1.1 創(chuàng)建項目
1. 使用 create-next-app創(chuàng)建新的 Next.js 應(yīng)用程序，它會自動為你設(shè)置所有內(nèi)容。
npx create-next-app@latest
# or
yarn create next-app
2. 如果你希望使用 TypeScript 開發(fā)項目，可以通過 --typescript 參數(shù)創(chuàng)建 TypeScript 項目
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
3. 創(chuàng)建過程中會提示選擇項目配置，截圖如下
- 項目名稱，這里輸入react_next_pro。
- 項目是否需要使用Typescript。
- 項目是否需要使用ESLint。
- 是否需要在項目中使用src目錄，不使用src目錄默認(rèn)會把所有文件放在根目錄，為了方便開發(fā)，這里啟用src目錄。
- 是否在src目錄下啟用app目錄，默認(rèn)會放一些框架相關(guān)的東西。這里啟用之后會在app目錄中生成首頁內(nèi)容。
- 是否啟用路徑別名，方便使用。
4. 項目創(chuàng)建成功，安裝項目所需環(huán)境
npm install next react react-dom
# or
yarn add next react react-dom
5. 修改 package.json 配置文件
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
6. 啟動項目：
- 運行 npm run dev 或 yarn dev 來啟動開發(fā)服務(wù)器，訪問地址為 http://localhost:3000。
1.2 項目目錄結(jié)構(gòu)
1. 目錄結(jié)構(gòu)如下
文章來源：http://www.zghlxwxcb.cn/news/detail-490088.html
- 訪問
http://localhost:3000/home可以進(jìn)入pages/home/index.jsx頁面 - 訪問
http://localhost:3000/profile可以進(jìn)入pages/profile/index.jsx頁面
2. 目錄詳細(xì)介紹
- .next目錄。這是Nextjs的緩存目錄，在執(zhí)行dev或者build等命令的時候，會在本地項目的根目錄下生成此目錄，開發(fā)不需要關(guān)注。想要了解更多的可以稍微研究一下，使用緩存/已生成的方式加速編譯。
- .vscode目錄?？疵志椭?，這個是vscode編輯器使用到的配置目錄。
- public目錄。這個主要放置靜態(tài)資源，默認(rèn)沒有二級目錄，為了方便可以簡單創(chuàng)建幾個目錄來放相關(guān)資源。默認(rèn)路徑是在根目錄，使用的時候可以使用類似/favicon.ico的形式引用。
- src目錄。這個目錄是主要源代碼的位置，初始目錄下有app默認(rèn)頁和pages其他頁面目錄。在pages目錄下還有一個默認(rèn)api目錄，主要放置Nextjs提供的服務(wù)端API。
- next.config.js。Nextjs的配置文件，這里默認(rèn)只有appDir參數(shù)。
總結(jié)：至此，next項目創(chuàng)建完畢，大家動手操作起來吧~~文章來源地址http://www.zghlxwxcb.cn/news/detail-490088.html
到了這里，關(guān)于nextjs系列教程(二)：項目創(chuàng)建及目錄結(jié)構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
