安装

 系统要求：

  • Node.js 18.17 或更高版本。
  • 支持 macOS、Windows（包括 WSL）和 Linux。

 自动安装

我们建议使用 create-next-app 启动新的 Next.js 应用程序，它会自动为您设置所有内容。要创建项目，请运行：

<span><span>npx </span><span>create-next-app@latest</span></span>

安装时，您将看到以下提示：

<span><span>What is your project named? my-app</span></span>
<span><span>Would you like to use TypeScript? No / Yes</span></span>
<span><span>Would you like to use ESLint? No / Yes</span></span>
<span><span>Would you like to use Tailwind CSS? No / Yes</span></span>
<span><span>Would you like to use `src/` directory? No / Yes</span></span>
<span><span>Would you like to use App Router? (recommended) No / Yes</span></span>
<span><span>Would you like to customize the default import alias (@/*)? No / Yes</span></span>
<span><span>What import alias would you like configured? @/*</span></span>

出现提示后， create-next-app 将使用您的项目名称创建一个文件夹并安装所需的依赖项。

如果您是 Next.js 的新手，请参阅项目结构文档以了解应用程序中所有可能的文件和文件夹的概述。

 很高兴知道：

  • Next.js 现在默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。
  • 您可以选择使用项目根目录中的 src 目录将应用程序的代码与配置文件分开。

 手动安装

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

<span><span>npm </span><span>install</span><span> </span><span>next@latest</span><span> </span><span>react@latest</span><span> </span><span>react-dom@latest</span></span>

打开您的 package.json 文件并添加以下 scripts ：

<span><span>{</span></span>
<span><span>  </span><span>"scripts"</span><span>:</span><span> {</span></span>
<span><span>    </span><span>"dev"</span><span>:</span><span> </span><span>"next dev"</span><span>,</span></span>
<span><span>    </span><span>"build"</span><span>:</span><span> </span><span>"next build"</span><span>,</span></span>
<span><span>    </span><span>"start"</span><span>:</span><span> </span><span>"next start"</span><span>,</span></span>
<span><span>    </span><span>"lint"</span><span>:</span><span> </span><span>"next lint"</span></span>
<span><span>  }</span></span>
<span><span>}</span></span>

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

  • dev ：运行 next dev 以在开发模式下启动 Next.js。
  • build ：运行 next build 来构建用于生产的应用程序。
  • start ：运行 next start 来启动 Next.js 生产服务器。
  • lint ：运行 next lint 以设置 Next.js 的内置 ESLint 配置。

 创建目录

Next.js 使用文件系统路由，这意味着应用程序中的路由由您构建文件的方式决定。

  app 目录

对于新应用程序，我们建议使用 App Router。该路由器允许您使用 React 的最新功能，并且是基于社区反馈的 Pages Router 的演变。

创建 app/ 文件夹，然后添加 layout.tsx 和 page.tsx 文件。当用户访问应用程序的根目录 ( / ) 时，将呈现这些内容。

App Folder Structure

使用所需的 <html> 和 <body> 标记在 app/layout.tsx 内创建根布局：

<span><span>export</span><span> </span><span>default</span><span> </span><span>function</span><span> </span><span>RootLayout</span><span>({</span></span>
<span><span>  children</span><span>,</span></span>
<span><span>}</span><span>:</span><span> {</span></span>
<span><span>  children</span><span>:</span><span> </span><span>React</span><span>.</span><span>ReactNode</span></span>
<span><span>}) {</span></span>
<span><span>  </span><span>return</span><span> (</span></span>
<span><span>    &lt;</span><span>html</span><span> </span><span>lang</span><span>=</span><span>"en"</span><span>&gt;</span></span>
<span><span>      &lt;</span><span>body</span><span>&gt;{children}&lt;/</span><span>body</span><span>&gt;</span></span>
<span><span>    &lt;/</span><span>html</span><span>&gt;</span></span>
<span><span>  )</span></span>
<span><span>}</span></span>

最后，创建一个包含一些初始内容的主页 app/page.tsx ：

<span><span>export</span><span> </span><span>default</span><span> </span><span>function</span><span> </span><span>Page</span><span>() {</span></span>
<span><span>  </span><span>return</span><span> &lt;</span><span>h1</span><span>&gt;Hello, Next.js!&lt;/</span><span>h1</span><span>&gt;</span></span>
<span><span>}</span></span>

很高兴知道：如果您忘记创建 layout.tsx ，Next.js 将在使用 next dev 运行开发服务器时自动创建此文件。

了解有关使用 App Router 的更多信息。

pages 目录（可选）

如果您更喜欢使用页面路由器而不是应用程序路由器，则可以在项目的根目录中创建一个 pages/ 目录。

然后，在 pages 文件夹中添加一个 index.tsx 文件。这将是您的主页 ( / )：

<span><span>export</span><span> </span><span>default</span><span> </span><span>function</span><span> </span><span>Page</span><span>() {</span></span>
<span><span>  </span><span>return</span><span> &lt;</span><span>h1</span><span>&gt;Hello, Next.js!&lt;/</span><span>h1</span><span>&gt;</span></span>
<span><span>}</span></span>

接下来，在 pages/ 内添加一个 _app.tsx 文件来定义全局布局。了解有关自定义 App 文件的更多信息。

<span><span>import</span><span> </span><span>type</span><span> { AppProps } </span><span>from</span><span> </span><span>'next/app'</span></span>
<span> </span>
<span><span>export</span><span> </span><span>default</span><span> </span><span>function</span><span> </span><span>App</span><span>({ Component</span><span>,</span><span> pageProps }</span><span>:</span><span> </span><span>AppProps</span><span>) {</span></span>
<span><span>  </span><span>return</span><span> &lt;</span><span>Component</span><span> {</span><span>...</span><span>pageProps} /&gt;</span></span>
<span><span>}</span></span>

最后，在 pages/ 内添加一个 _document.tsx 文件来控制服务器的初始响应。了解有关自定义文档文件的更多信息。

<span><span>import</span><span> { Html</span><span>,</span><span> Head</span><span>,</span><span> Main</span><span>,</span><span> NextScript } </span><span>from</span><span> </span><span>'next/document'</span></span>
<span> </span>
<span><span>export</span><span> </span><span>default</span><span> </span><span>function</span><span> </span><span>Document</span><span>() {</span></span>
<span><span>  </span><span>return</span><span> (</span></span>
<span><span>    &lt;</span><span>Html</span><span>&gt;</span></span>
<span><span>      &lt;</span><span>Head</span><span> /&gt;</span></span>
<span><span>      &lt;</span><span>body</span><span>&gt;</span></span>
<span><span>        &lt;</span><span>Main</span><span> /&gt;</span></span>
<span><span>        &lt;</span><span>NextScript</span><span> /&gt;</span></span>
<span><span>      &lt;/</span><span>body</span><span>&gt;</span></span>
<span><span>    &lt;/</span><span>Html</span><span>&gt;</span></span>
<span><span>  )</span></span>
<span><span>}</span></span>

了解有关使用页面路由器的更多信息。

很高兴知道：虽然您可以在同一项目中使用两个路由器，但 app 中的路由将优先于 pages 。我们建议在您的新项目中仅使用一台路由器以避免混淆。

public 文件夹（可选）

创建一个 public 文件夹来存储静态资源，例如图像、字体等。然后，您的代码可以从基本 URL ( /

运行开发服务器

  1. 运行 npm run dev 以启动开发服务器。
  2. 访问 http://localhost:3000 查看您的申请。
  3. 编辑 app/page.tsx （或 pages/index.tsx ）文件并保存以在浏览器中查看更新后的结果。