安装
系统要求：
- Node.js 18.18 或更高版本。
- 支持 macOS、Windows (包括 WSL) 和 Linux。
自动安装
我们建议使用 create-next-app 来启动一个新的 Next.js 应用程序，它会为你自动设置好一切。要创建一个项目，请运行：
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 将创建一个以你的项目名命名的文件夹，并安装所需的依赖。
如果你是 Next.js 新手，请查看 项目结构 文档，了解应用程序中所有可能的文件和文件夹的概览。
值得注意的是：
- Next.js 现在默认提供 TypeScript、ESLint 和 Tailwind CSS 配置。
- 你可以选择在项目根目录使用
src目录，以将应用程序代码与配置文件分开。
手动安装
要手动创建一个新的 Next.js 应用程序，请安装所需的包：
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"
}
}这些脚本对应用程序开发的不同阶段：
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/layout.tsx 中创建一个 根布局，包含必需的 <html> 和 <body> 标签：
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}最后，创建一个包含一些初始内容的主页 app/page.tsx：
export default function Page() {
return <h1>Hello, Next.js!</h1>
}值得注意的是：如果你忘记创建
layout.tsx，Next.js 会在运行开发服务器next dev时自动创建此文件。
了解更多关于 使用 App Router 的信息。
pages 目录 (可选)
如果你更喜欢使用 Pages Router 而不是 App Router，你可以在项目根目录创建一个 pages/ 目录。
然后，在 pages 文件夹中添加一个 index.tsx 文件。这将是你的主页 (/)：
export default function Page() {
return <h1>Hello, Next.js!</h1>
}接下来，在 pages/ 中添加一个 _app.tsx 文件来定义全局布局。了解更多关于 自定义 App 文件 的信息。
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}最后，在 pages/ 中添加一个 _document.tsx 文件来控制来自服务器的初始响应。了解更多关于 自定义 Document 文件 的信息。
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}了解更多关于 使用 Pages Router 的信息。
值得注意的是：虽然你可以在同一个项目中使用两种路由器，但
app中的路由优先级高于pages。我们建议在新项目中只使用一种路由器，以避免混淆。
public 文件夹 (可选)
创建一个 public 文件夹来存储静态资源，如图片、字体等。public 目录中的文件可以从基础 URL (/) 开始被你的代码引用。
运行开发服务器
- 运行
npm run dev启动开发服务器。 - 访问
http://localhost:3000查看你的应用程序。 - 编辑
app/page.tsx(或pages/index.tsx) 文件并保存，以在浏览器中看到更新后的结果。