安装Next.js

系统要求

运行Next.js的要求是:

  • Node.js 16.14 或更高版本

  • macOS, Windows (包括 WSL)和Linux

安装步骤

安装Node.js可以采用 Node.js开发环境 方法

  • 安装 nvm :

安装 nvm 管理Node.js版本
# 安装nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
使用 nvm 安装Node.js
# 下载和安装Nodes.js，安装current版本，指定22
npm install 22

# 如果要安装LTS稳定完本，则指定20
npm install 20

自动安装

  • Next.js 提供了一种自动安装方式: 直接运行 create-next-app 就会既安装软件框架包，同时又交互式创建项目(目录):

通过 create-next-app 就会既安装软件框架包，同时又交互式创建项目(目录)
npx create-next-app@latest

此时会交互提示(这里我用了默认配置，仅输入 site 作为自己的项目名):

通过 create-next-app 创建了项目 site ，默认参数
Need to install the following packages:
  [email protected]
Ok to proceed? (y)
✔ What is your project named? … docs.cloud-atlas.io
✔ Would you like to use TypeScript? … No / Yes                           <= Yes
✔ Would you like to use ESLint? … No / Yes                               <= Yes
✔ Would you like to use Tailwind CSS? … No / Yes                         <= Yes
✔ Would you like to use `src/` directory? … No / Yes                     <= Yes
✔ Would you like to use App Router? (recommended) … No / Yes             <= Yes
✔ Would you like to customize the default import alias? … No / Yes       <= No
Creating a new Next.js app in /Users/huataihuang/docs/github.com/cloud-atlas-io/site.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 370 packages, and audited 371 packages in 17m

140 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created docs.cloud-atlas.io at /Users/huatai/docs/github/huataihuang/docs.cloud-atlas.io

手工安装

  • 手工安装是先安装 next.js 和 react 等:

手工安装 Next.js
npm install next@latest react@latest react-dom@latest

然后手工创建目录结构(见官方原文，比较繁琐，我这里忽略记录)

目录

通过 自动安装 之后，会形成一个项目目录，并且提供几种运行模式:

  • dev : 以开发模式启动 Next.js

  • build : 构建生产环境的应用

  • start : 启动一个 Next.js 生产服务器

  • lint : 设置 Next.js 内建的 ESLint 配置

运行

  • 运行 Next.js 程序的 dev 模式:

运行 Next.js dev模式
npm run dev

此时可以使用浏览器访问 http://localhost:3000/ 可以看到一个简单页面(其中提供了一些导航到官网的文档、模版等)

../../_images/nextjs_start_dev.png

创建 app 目录

Next.js 使用文件系统路由( file-system routing )，也就是说如何在应用程序中路由取决于你如何组织文件:

简单的 Next.js app 目录
├── app
│   ├── layout.tsx
│   ├── page.tsx

简单的 app 目录下创建2个文件(如果是上述自动部署则已经自动创建):

  • app/layout.tsx 是确定页面布局的文件:

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

  • app/page.tsx 是页面内容

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

参考