项目实践前提需知道
本次的项目实践以Next.js 13版本为例子进行开发。在Next.js13版本中存在两套路由规制，分别为**「App Router」和「Page Router」。本次我们将使用「App Router」进行项目实践,梦兽认为「App Router」**更使用起来更顺手，更现代化。
安装并启动Next.js项目
在开始我们的Next.js项目之前，我们需要确保我们的系统满足以下要求：
- Node.js 16.8或更高版本
- 支持的操作系统包括macOS，Windows（包括WSL）和Linux
1. 自动安装
我们推荐使用create-next-app来创建一个新的Next.js应用，这个命令会为你自动设置好所有的东西。运行以下命令来创建一个项目：
npx create-next-app@latest
在安装过程中，你会看到以下提示：
What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
// 建议 Yest
Would you like to use ESLint with this project? No / Yes
// 建议 No
Would you like to use Tailwind CSS with this project? No / Yes
// 建议 Yes
Would you like to use `src/` directory with this project? No / Yes
// 看你喜欢
Use App Router (recommended)? No / Yes
// 这里启动Yes
Would you like to customize the default import alias? No / Yes
// 建议Yes
在提示结束后，create-next-app会创建一个以你的项目名命名的文件夹，并安装所需的依赖。
2. 手动安装
如果你想手动创建一个新的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配置。
接下来，创建一个app文件夹，并添加layout.tsx和page.tsx文件。当用户访问你的应用程序的根目录时，这些文件将被渲染。 在app/layout.tsx中创建一个包含必要的和标签的根布局：
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
最后，创建一个带有一些初始内容的主页app/page.tsx：
export default function Page() {
return Hello, Next.js!
}
3. 包管理器推荐
在主流的包管理器pnpm,yarn,npm中梦兽编程推荐使用pnpm。因为pnpm很容易建立workspace应用。但如果是依赖关系比较中的项目建议使用lerna。lerna在workspace应用方面提供的服务与功能更加的全面。
4. 运行开发服务器
运行pnpm run dev来启动开发服务器，然后访问http://localhost:3000 来查看你的应用。你可以编辑app/layout.tsx或app/page.tsx并保存，然后在浏览器中看到更新的结果。
screenshot-20230901-121815.png
以上就是关于如何安装并启动Next.js项目的教程。希望这对你有所帮助！
结语
这里是梦兽编程，本次的代码更新将会放在Github本次项目的Github连接中。
我的B站视频号更多视频动态。
本文使用 markdown.com.cn 排版
