安装
系统要求：
- Node.js 18.17 或更高版本
- 支持 macOS、Windows（包括 WSL）和 Linux 系统
自动安装
推荐使用 create-next-app 创建新的 Next.js 应用，该工具会自动完成所有配置。执行以下命令创建项目：
npx create-next-app@latest安装过程中会显示以下选项：
请输入项目名称？my-app
是否使用 TypeScript？否 / 是
是否使用 ESLint？否 / 是
是否使用 Tailwind CSS？否 / 是
是否使用 `src/` 目录？否 / 是
是否使用 App Router？（推荐）否 / 是
是否自定义默认导入别名 (@/*)？否 / 是
请输入需要配置的导入别名？@/*完成选项后，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启动开发模式build: 运行next build构建生产环境应用start: 运行next start启动生产服务器lint: 运行next lint配置内置 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>
)
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}最后创建包含初始内容的首页 app/page.tsx：
export default function Page() {
return <h1>Hello, Next.js!</h1>
}export default function Page() {
return <h1>Hello, Next.js!</h1>
}须知：如果忘记创建
layout.tsx，运行next dev启动开发服务器时 Next.js 会自动生成该文件。
了解更多关于 使用 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} />
}export default function App({ Component, pageProps }) {
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）文件并保存后，可在浏览器中实时查看更新效果