NextJS中文文档 - Installation

系统要求

在开始之前，请确保您的系统满足以下要求：

• Node.js 18.18 或更高版本。
• macOS、Windows（包括 WSL）或 Linux。

自动安装

创建新的 Next.js 应用程序最快的方法是使用 create-next-app，它会自动为您设置好所有内容。要创建项目，请运行：

npx create-next-app@latest

在安装过程中，您会看到以下提示：

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? @/*

完成提示后，create-next-app 将创建一个包含您项目名称的文件夹，并安装所需的依赖项。

手动安装/nextjs-cn/

要手动创建新的 Next.js 应用程序，请安装所需的包：

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

然后，将以下脚本添加到您的 package.json 文件中：

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

这些脚本对应于应用程序开发的不同阶段：

• next dev：启动开发服务器。
• next build：构建生产环境的应用程序。
• next start：启动生产服务器。
• next lint：运行 ESLint。

Create the public folder (optional)

Create a public folder at the root of your project to store static assets such as images, fonts, etc. Files inside public can then be referenced by your code starting from the base URL (/).

You can then reference thes/nextjs-cn/he root path (/). For example, public/profile.png can be referenced as /profile.png:

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

Run the development server

1. Run npm run dev to start the development server.
2. Visit http://localhost:3000 to view your application.
3. Edit the file and save it to see the updated result in your browser.

Set up TypeScript

Minimum TypeScript version: v4.5.2

Next.js comes with built-in TypeScript support. To add TypeScript to your project, rename a file to .ts / .tsx and run next dev. Next.js will automatically install the necessary dependencies and add a tsconfig.json file with the recommended config options.

See the TypeScript reference page for more information.

Set up ESLint/nextjs-cn/

Next.js comes with built-in ESLint. It automatically installs the necessary packages and configures the proper settings when you create a new project with create-next-app.

To manually add ESLint to an existing project, add next lint as a script to package.json:

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

Then, run npm run lint and you will be guided through the installation and configuration process.

npm run lint

You'll see a prompt like this:

? How would you like to configure ESLint?

❯ Strict (recommended)
Base
Cancel

• Strict: Includes Next.js' base ESLint configuration along with a stricter Core Web Vitals rule-set. This is the recommended configuration for developers setting up ESLint for the first time.
• Base: Includes Next.js' base ESLint configuration.
• Cancel: Skip configuration. Select this option if you plan on setting up your own custom ESLint configuration.

If Strict or Base are selected, Next.js will automatically install eslint and eslint-config-next as dependencies in your application and create an .eslintrc.json file in the root of your project that includes your selected configuration.

You can now run next lint every time you want to run ESLint to catch errors. Once ESLint has been set up, it will also automatically run during every build (next build). Errors will fail the build, while warnings will not.

See the ESLint Plugin page for more information.

Set up Absolute Impor/nextjs-cn/th Aliases

Next.js has in-built support for the "paths" and "baseUrl" options of tsconfig.json and jsconfig.json files.

These options allow you to alias project directories to absolute paths, making it easier and cleaner to import modules. For example:

// Before
import { Button } from '../../../components/button'

// After
import { Button } from '@/components/button'

To configure absolute imports, add the baseUrl configuration option to your tsconfig.json or jsconfig.json file. For example:

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

In addition to configuring the baseUrl path, you can use the "paths" option to "alias" module paths.

For example, the following configuration maps @/components/* to components/*:

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

Each of the "paths" are relative to the baseUrl location.