Next.js 項(xiàng)目安裝與入門(mén)：新手指南

2025-03-19 17:28 更新

系統(tǒng)要求

  • Node.js 18.18 或更高版本。
  • 支持的操作系統(tǒng)：macOS、Windows（包括 WSL）和 Linux。

自動(dòng)安裝

推薦使用 create-next-app 來(lái)創(chuàng)建新的 Next.js 應(yīng)用，它會(huì)自動(dòng)為你設(shè)置好一切。創(chuàng)建項(xiàng)目時(shí)，運(yùn)行以下命令：

npx create-next-app@latest

安裝過(guò)程中，你會(huì)看到以下提示：

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

翻譯成中文大意如下：

項(xiàng)目名稱(chēng)是什么？my-app
是否使用 TypeScript？否 / 是
是否使用 ESLint？否 / 是
是否使用 Tailwind CSS？否 / 是
是否將代碼放在 `src/` 目錄中？否 / 是
是否使用 App Router？（推薦）否 / 是
是否在 `next dev` 中使用 Turbopack？否 / 是
是否自定義導(dǎo)入別名（默認(rèn)為 `@/*`）？否 / 是
要配置的導(dǎo)入別名是什么？@/*

回答完這些問(wèn)題后，create-next-app 會(huì)創(chuàng)建一個(gè)以項(xiàng)目名稱(chēng)命名的文件夾，并安裝所需的依賴(lài)項(xiàng)。

手動(dòng)安裝

如果你想手動(dòng)創(chuàng)建一個(gè)新的 Next.js 應(yīng)用，安裝所需的包：

npm install next@latest react@latest react-dom@latest

打開(kāi)你的 package.json 文件，添加以下 scripts：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

這些腳本對(duì)應(yīng)于開(kāi)發(fā)應(yīng)用程序的不同階段：

  • dev：運(yùn)行 next dev 以在開(kāi)發(fā)模式下啟動(dòng) Next.js。
  • build：運(yùn)行 next build 以構(gòu)建生產(chǎn)環(huán)境的應(yīng)用程序。
  • start：運(yùn)行 next start 以啟動(dòng) Next.js 生產(chǎn)服務(wù)器。
  • lint：運(yùn)行 next lint 以設(shè)置 Next.js 的內(nèi)置 ESLint 配置。

創(chuàng)建 app 目錄

Next.js 使用文件系統(tǒng)路由，這意味著你的應(yīng)用中的路由由你如何組織文件來(lái)決定。

創(chuàng)建一個(gè) app 文件夾，然后添加 layout.tsx 和 page.tsx 文件。當(dāng)用戶(hù)訪(fǎng)問(wèn)應(yīng)用的根路徑（/）時(shí)，這些文件將被渲染。

Next.js 安裝教程-創(chuàng)建app目錄

在 app/layout.tsx 中創(chuàng)建根布局，包含必需的 <html> 和 <body> 標(biāo)簽：

export default function RootLayout({
  w3cschool,
}: {
  w3cschool: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>{w3cschool}</body>
    </html>
  )
}

最后，在 app/page.tsx 中創(chuàng)建一個(gè)主頁(yè)，添加一些初始內(nèi)容：

export default function Page() {
  return <h1>你好, 編程獅!</h1>
}

小貼士：

- 如果你忘記創(chuàng)建 layout.tsx，Next.js 會(huì)在運(yùn)行開(kāi)發(fā)服務(wù)器 next dev 時(shí)自動(dòng)生成該文件。
- 你可以在項(xiàng)目根目錄中可選地使用 src 目錄，將應(yīng)用代碼與配置文件分開(kāi)。

創(chuàng)建 public 文件夾（可選）

你可以在項(xiàng)目根目錄中可選地創(chuàng)建一個(gè) public 文件夾，用于存儲(chǔ)靜態(tài)資源，如圖片、字體等。public 文件夾中的文件可以通過(guò)從基礎(chǔ) URL（/）開(kāi)始的路徑在代碼中引用。

運(yùn)行開(kāi)發(fā)服務(wù)器

  1. 運(yùn)行 npm run dev 以啟動(dòng)開(kāi)發(fā)服務(wù)器。
  2. 訪(fǎng)問(wèn) http://localhost:3000 查看你的應(yīng)用。
  3. 編輯 app/page.tsx 文件并保存，瀏覽器中會(huì)顯示更新后的內(nèi)容。

設(shè)置 TypeScript

最低 TypeScript 版本：v4.5.2

Next.js 內(nèi)置了對(duì) TypeScript 的支持。要將 TypeScript 添加到你的項(xiàng)目中，將文件重命名為 .ts / .tsx。運(yùn)行 next dev，Next.js 會(huì)自動(dòng)安裝所需的依賴(lài)項(xiàng)，并添加一個(gè)帶有推薦配置選項(xiàng)的 tsconfig.json 文件。

IDE 插件

Next.js 包含一個(gè)自定義的 TypeScript 插件和類(lèi)型檢查器，VSCode 和其他代碼編輯器可以使用它進(jìn)行高級(jí)類(lèi)型檢查和自動(dòng)補(bǔ)全。

你可以在 VS Code 中通過(guò)以下步驟啟用該插件：

  1. 打開(kāi)命令面板（Ctrl/? + Shift + P）
  2. 搜索“TypeScript: 選擇 TypeScript 版本”
  3. 選擇“使用工作區(qū)版本”

Next.js安裝教程-IDE 插件

現(xiàn)在，當(dāng)你編輯文件時(shí)，自定義插件將被啟用。運(yùn)行 next build 時(shí)，將使用自定義類(lèi)型檢查器。

有關(guān)如何在項(xiàng)目中使用 TypeScript 的更多信息，請(qǐng)參閱 TypeScript 配置頁(yè)面。

設(shè)置 ESLint

Next.js 內(nèi)置了 ESLint，當(dāng)你使用 create-next-app 創(chuàng)建新項(xiàng)目時(shí)，會(huì)自動(dòng)安裝所需的包并配置適當(dāng)?shù)脑O(shè)置。

要將 ESLint 添加到現(xiàn)有項(xiàng)目中，在 package.json 中添加 next lint 作為腳本：

{
  "scripts": {
    "lint": "next lint"
  }
}

然后，運(yùn)行 npm run lint，你將被引導(dǎo)完成安裝和配置過(guò)程。

你會(huì)看到類(lèi)似以下的提示：

? How would you like to configure ESLint?

? Strict (recommended)
Base
Cancel

中文大意如下：

? 你希望如何配置 ESLint？

? 嚴(yán)格（推薦）

基礎(chǔ)

取消

  • 嚴(yán)格：包含 Next.js 的基礎(chǔ) ESLint 配置以及更嚴(yán)格的 Core Web Vitals 規(guī)則集。這是首次設(shè)置 ESLint 的開(kāi)發(fā)者推薦的配置。
  • 基礎(chǔ)：包含 Next.js 的基礎(chǔ) ESLint 配置。
  • 取消：不包含任何 ESLint 配置。只有在你計(jì)劃設(shè)置自己的自定義 ESLint 配置時(shí)才選擇此選項(xiàng)。

如果選擇了上述兩種配置選項(xiàng)之一，Next.js 將自動(dòng)在你的應(yīng)用中安裝 eslint 和 eslint-config-next 作為依賴(lài)項(xiàng)，并在項(xiàng)目根目錄中創(chuàng)建一個(gè) .eslintrc.json 文件，其中包含你選擇的配置。

現(xiàn)在，每次你想要運(yùn)行 ESLint 捕獲錯(cuò)誤時(shí)，可以運(yùn)行 next lint。設(shè)置好 ESLint 后，它還將在每次構(gòu)建（next build）時(shí)自動(dòng)運(yùn)行。錯(cuò)誤將導(dǎo)致構(gòu)建失敗，而警告則不會(huì)。

有關(guān)如何在項(xiàng)目中配置 ESLint 的更多信息，請(qǐng)參閱 ESLint 插件頁(yè)面。

設(shè)置絕對(duì)導(dǎo)入和模塊路徑別名

Next.js 內(nèi)置支持 tsconfig.json 和 jsconfig.json 文件的 "paths" 和 "baseUrl" 選項(xiàng)。這些選項(xiàng)允許你將項(xiàng)目目錄別名映射到絕對(duì)路徑，使導(dǎo)入模塊變得更加容易。例如：

// 修改前
import { Button } from '../../../components/button'


// 修改后
import { Button } from '@/components/button'

要配置絕對(duì)導(dǎo)入，在你的 tsconfig.json 或 jsconfig.json 文件中添加 baseUrl 配置選項(xiàng)。例如：

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

除了配置 baseUrl 路徑外，你還可以使用 "paths" 選項(xiàng)來(lái)“別名”模塊路徑。

例如，以下配置將 @/components/* 映射到 components/*：

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

每個(gè) "paths" 都相對(duì)于 baseUrl 位置。例如：

import Button from '@/components/button'
import '@/styles/styles.css'


export default function HomePage() {
  return (
    <div>
      <h1>Hello W3Cschool</h1>
      <Button />
    </div>
  )
}
以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)