欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用?Next.js?Cli?快速搭建和運(yùn)行?Web?應(yīng)用

 更新時(shí)間：2024年04月14日 09:02:24   作者：云牧  
這篇文章主要介紹了使用?Next.js?Cli?快速搭建和運(yùn)行?Web?應(yīng)用,需要的朋友可以參考下

Next.js 提供了便捷的 create-next-app 腳手架，它支持 TypeScript、ESLint 等功能，無(wú)需配置即可自動(dòng)編譯和打包。
環(huán)境要求：本文基于 Next.js v14 最新版本，需要Node.js 18.17 或更高版本。

使用 cli 自動(dòng)創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目

使用 create-next-app 是最快捷的創(chuàng)建項(xiàng)目方式：

npx create-next-app@latest

image.png
運(yùn)行此命令后，系統(tǒng)會(huì)提示您設(shè)置項(xiàng)目名稱和選擇一些選項(xiàng)，如 TypeScript、ESLint 的使用等。初學(xué)者可以選擇默認(rèn)設(shè)置。

運(yùn)行項(xiàng)目

在項(xiàng)目根目錄的 package.json 中，您會(huì)看到以下腳本命令：
image.png

  • npm run dev：用于開發(fā)環(huán)境。
  • npm run build：構(gòu)建生產(chǎn)環(huán)境的代碼。
  • npm run start：運(yùn)行生產(chǎn)環(huán)境的項(xiàng)目。
  • npm run lint：執(zhí)行代碼檢查。

項(xiàng)目下運(yùn)行 npm run dev，打開瀏覽器訪問 http://localhost:3000，若頁(yè)面顯示正常，則表示項(xiàng)目成功運(yùn)行。image.png

示例代碼

Next.js 在 GitHub 上提供了豐富的示例代碼，如 with-redux、api-routes-cors 等。您可以通過(guò)以下命令直接基于示例代碼創(chuàng)建項(xiàng)目：

npx create-next-app --example with-redux your-app-name

手動(dòng)創(chuàng)建項(xiàng)目

雖然大部分情況下我們不需要手動(dòng)創(chuàng)建項(xiàng)目，但了解手動(dòng)創(chuàng)建的過(guò)程有助于理解 Next.js 項(xiàng)目的基礎(chǔ)結(jié)構(gòu)。

創(chuàng)建文件夾并安裝依賴

創(chuàng)建文件夾（例如 next-app-manual），進(jìn)入目錄，安裝以下依賴：

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>;
}

運(yùn)行項(xiàng)目

執(zhí)行 npm run dev，如果頁(yè)面正常渲染，則表示項(xiàng)目運(yùn)行成功。
image.png

Next cli

在 package.json 文件中，當(dāng)我們運(yùn)行 npm run dev 命令時(shí)，實(shí)際上是在執(zhí)行 next dev。以下是 Next.js CLI 常用命令的快速概覽。

CLI 命令快速訪問

要查看所有可用的 CLI 命令，可以在命令行中執(zhí)行以下命令：

npx next -h

由于使用 npx 創(chuàng)建的項(xiàng)目避免了全局安裝 create-next-app，本地并不會(huì)安裝 next 命令。如果需要執(zhí)行 next 命令，請(qǐng)?jiān)诿钋凹由?npx。


image.png
該命令會(huì)顯示所有可用的 next 命令選項(xiàng)，其中 -h 是 --help 的簡(jiǎn)寫。

next dev

開發(fā)模式下，使用以下命令運(yùn)行程序：

npx next dev

此命令具有熱加載、錯(cuò)誤報(bào)告等功能。默認(rèn)運(yùn)行在 http://localhost:3000。

next build

next build 命令用于創(chuàng)建項(xiàng)目的生產(chǎn)優(yōu)化版本。

npx next build

構(gòu)建輸出說(shuō)明

構(gòu)建時(shí)，會(huì)顯示每條路由的信息，如 Size 和 First Load JS。這些值表示 gzip 壓縮后的大小，其中 First Load JS 會(huì)以綠色、黃色或紅色標(biāo)識(shí)性能等級(jí)。


image.png

  • Size：到達(dá)特定路由時(shí)下載的資源大小，只包含該路由的依賴項(xiàng)。
  • First Load JS：加載頁(yè)面時(shí)下載的資源總大小。
  • First load JS shared by all：所有路由共享的 JS 大小。

關(guān)系如下：

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 或更高版本）：
需要需要瀏覽器有一個(gè) React 插件：

npx next build --profile npm run start

image.png

構(gòu)建調(diào)試

npx next build --debug

此命令會(huì)輸出更詳細(xì)的構(gòu)建信息，如 rewrites、redirects、headers 等。

next start

生產(chǎn)模式下，使用以下命令運(yùn)行程序：

npx next start

在運(yùn)行此命令之前，需要先執(zhí)行 next build 生成生產(chǎn)代碼。默認(rèn)運(yùn)行在 http://localhost:3000。

端口設(shè)置

npx next start -p 4000

next lint

執(zhí)行以下命令進(jìn)行 ESLint 檢查：

npx next lint

默認(rèn)檢查 pages/、app/、components/、lib/、src/ 目錄下的文件。
image.png

指定檢查目錄

npx next lint --dir utils

next info

打印當(dāng)前系統(tǒng)相關(guān)信息，以便報(bào)告 Next.js 程序的 bug：

npx next info

這些信息可幫助開發(fā)者或 Next.js 官方團(tuán)隊(duì)排查問題。


image.png

以上就是使用 Next.js Cli 快速搭建和運(yùn)行 Web 應(yīng)用的詳細(xì)內(nèi)容，更多關(guān)于Next.js Cli 快速搭建運(yùn)行 Web 應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論