前言
创建 Next 项目有两种方式：【使用脚手架创建项目】和【手动创建项目】
使用脚手架创建项目
最快捷的创建 Next.js 项目的方式是使用 create-next-app脚手架，你只需要运行：
npx create-next-app@latest
# 如果你不使用 npx，也支持使用 yarn、pnpm、bunx：
# yarn create next-app
# pnpm create next-app
# bunx create-next-app
如果你使用的 Next.js 是 v14 版本，则需要 Node.js 18.17 及以后版本
项目初始化好以后，通过如下命令运行项目：
# 运行项目
npm run dev
Next.js 提供了丰富的示例代码，比如 with-redux、api-routes-cors、with-electron、with-jest、with-markdown、with-material-ui、with-mobx，从这些名字中也可以看出，这些示例代码演示了 Next.js 的各种使用场景，比如 with-redux就演示了 Next.js 如何与 redux 搭配使用。
你可以访问 github.com/vercel/next… 查看有哪些示例代码。如果你想直接使用某个示例代码，就比如 with-redux，无须手动 clone 代码，在创建项目的时候使用 --example 参数即可直接创建：
npx create-next-app --example with-redux your-app-name
注：使用示例代码的时候，并不会像执行 npx create-next-app时提示是否使用 TypeScript、ESLint 等，而是会直接进入项目创建和依赖安装阶段。
手动创建项目
大部分时候我们并不需要手动创建 Next.js 项目，但了解这个过程有助于我们认识到一个最基础的 Next.js 项目依赖哪些东西。
创建文件夹并安装依赖
现在，创建一个文件夹，假设名为 next-app-manual，cd 进入该目录，安装依赖：
npm install next@latest react@latest react-dom@latest
npm 会自动创建 package.json 并安装依赖项。
添加 scripts
打开 package.json，添加以下内容：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
创建目录
在 next-app-manual下新建 app 文件夹，app 下新建 layout.js 和 page.js文件，代码如下：
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/page.js
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
运行项目
现在运行 npm run dev，正常渲染则表示运行成功：
