项目实践前提需知道

本次的项目实践以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应用，这个命令会为你自动设置好所有的东西。运行以下命令来创建一个项目：

lua 复制代码

npx create-next-app@latest

在安装过程中，你会看到以下提示：

csharp 复制代码

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应用，你需要安装必要的包：

perl 复制代码

npm install next@latest react@latest react-dom@latest

然后，打开package.json并添加以下scripts：

json 复制代码

{
  "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中创建一个包含必要的和标签的根布局：

javascript 复制代码

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

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

javascript 复制代码

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

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 排版

1. 如何创建第一个Next项目