使用?Next.js?Cli?快速搭建和運行?Web?應用
Next.js 提供了便捷的 create-next-app 腳手架，它支持 TypeScript、ESLint 等功能，無需配置即可自動編譯和打包。
環(huán)境要求：本文基于 Next.js v14 最新版本，需要Node.js 18.17 或更高版本。
使用 cli 自動創(chuàng)建項目
創(chuàng)建項目
使用 create-next-app 是最快捷的創(chuàng)建項目方式：
npx create-next-app@latest
運行此命令后，系統(tǒng)會提示您設置項目名稱和選擇一些選項，如 TypeScript、ESLint 的使用等。初學者可以選擇默認設置。
運行項目
在項目根目錄的 package.json 中，您會看到以下腳本命令：
- npm run dev：用于開發(fā)環(huán)境。
- npm run build：構建生產(chǎn)環(huán)境的代碼。
- npm run start：運行生產(chǎn)環(huán)境的項目。
- npm run lint：執(zhí)行代碼檢查。
項目下運行 npm run dev，打開瀏覽器訪問 http://localhost:3000，若頁面顯示正常，則表示項目成功運行。
示例代碼
Next.js 在 GitHub 上提供了豐富的示例代碼，如 with-redux、api-routes-cors 等。您可以通過以下命令直接基于示例代碼創(chuàng)建項目：
npx create-next-app --example with-redux your-app-name
手動創(chuàng)建項目
雖然大部分情況下我們不需要手動創(chuàng)建項目，但了解手動創(chuàng)建的過程有助于理解 Next.js 項目的基礎結(jié)構。
創(chuàng)建文件夾并安裝依賴
創(chuàng)建文件夾（例如 next-app-manual），進入目錄，安裝以下依賴：
npm install next@latest react@latest react-dom@latest
添加腳本
編輯 package.json，添加以下 scripts 腳本：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}創(chuàng)建目錄與文件
在 next-app-manual 目錄下創(chuàng)建 app 文件夾，并在其中添加 layout.js 和 page.js：
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/page.js
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}運行項目
執(zhí)行 npm run dev，如果頁面正常渲染，則表示項目運行成功。
Next cli
在 package.json 文件中，當我們運行 npm run dev 命令時，實際上是在執(zhí)行 next dev。以下是 Next.js CLI 常用命令的快速概覽。
CLI 命令快速訪問
要查看所有可用的 CLI 命令，可以在命令行中執(zhí)行以下命令：
npx next -h
由于使用 npx 創(chuàng)建的項目避免了全局安裝 create-next-app，本地并不會安裝 next 命令。如果需要執(zhí)行 next 命令，請在命令前加上 npx。
該命令會顯示所有可用的 next 命令選項，其中 -h 是 --help 的簡寫。
next dev
開發(fā)模式下，使用以下命令運行程序：
npx next dev
此命令具有熱加載、錯誤報告等功能。默認運行在 http://localhost:3000。
next build
next build 命令用于創(chuàng)建項目的生產(chǎn)優(yōu)化版本。
npx next build
構建輸出說明
構建時，會顯示每條路由的信息，如 Size 和 First Load JS。這些值表示 gzip 壓縮后的大小，其中 First Load JS 會以綠色、黃色或紅色標識性能等級。
- Size：到達特定路由時下載的資源大小，只包含該路由的依賴項。
- First Load JS：加載頁面時下載的資源總大小。
- First load JS shared by all：所有路由共享的 JS 大小。
關系如下：
First Load JS = Size + First load JS shared by all
例如，如果 / 路由的 First Load JS 為 89 kB，Size 為 5.16 kB，則共享的 JS 大小為 83.9 kB。
生產(chǎn)性能分析
使用以下命令開啟 React 的生產(chǎn)性能分析（需要 Next.js v9.5 或更高版本）：
需要需要瀏覽器有一個 React 插件：
npx next build --profile npm run start
構建調(diào)試
npx next build --debug
此命令會輸出更詳細的構建信息，如 rewrites、redirects、headers 等。
next start
生產(chǎn)模式下，使用以下命令運行程序：
npx next start
在運行此命令之前，需要先執(zhí)行 next build 生成生產(chǎn)代碼。默認運行在 http://localhost:3000。
端口設置
npx next start -p 4000
next lint
執(zhí)行以下命令進行 ESLint 檢查：
npx next lint
默認檢查 pages/、app/、components/、lib/、src/ 目錄下的文件。
指定檢查目錄
npx next lint --dir utils
next info
打印當前系統(tǒng)相關信息，以便報告 Next.js 程序的 bug：
npx next info
這些信息可幫助開發(fā)者或 Next.js 官方團隊排查問題。
以上就是使用 Next.js Cli 快速搭建和運行 Web 應用的詳細內(nèi)容，更多關于Next.js Cli 快速搭建運行 Web 應用的資料請關注腳本之家其它相關文章！
相關文章
在Javascript中處理數(shù)組之toSource()方法的使用
這篇文章主要介紹了在Javascript中處理數(shù)組之toSource()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
js自帶函數(shù)備忘 數(shù)組...2006-12-12
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解,實例修正版。2009-07-07
這篇文章主要介紹了javascript判斷office版本示例,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了如何教你完全理解ReentrantLock重入鎖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面我們來一起學習一下吧2019-06-06
這篇文章主要介紹了JavaScript語言對Unicode字符集的支持詳解,需要的朋友可以參考下2014-12-12
js輸出列表的方法，里面有需要分辨文件的編碼聲明。2010-09-09
如果想用javascript獲取一個元素的樣式信息，首先想到的應該是元素的style屬性,下面我們看看javascript如何獲取元素CSS樣式2013-11-11
這篇文章主要介紹了詳解JavaScript中shift()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
Javascript中Array.prototype.map()詳解
map 方法會給原數(shù)組中的每個元素都按順序調(diào)用一次 callback 函數(shù)。callback 每次執(zhí)行后的返回值組合起來形成一個新數(shù)組。 callback 函數(shù)只會在有值的索引上被調(diào)用；那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調(diào)用。2014-10-10