Next.js 安装使用教程

一、Next.js 简介

Next.js 是一个基于 React 的服务端渲染（SSR）框架，由 Vercel 开发和维护。它支持静态生成（SSG）、服务器端渲染（SSR）、API 路由等特性，广泛应用于现代 Web 开发和 Jamstack 架构中。

二、安装前准备

2.1 安装 Node.js

访问 https://nodejs.org/ 下载并安装 LTS 版本。

2.2 推荐使用包管理器：npm 或 yarn

可通过以下命令验证安装：

bash 复制代码

node -v
npm -v

三、使用 Create Next App 快速创建项目

3.1 创建项目

bash 复制代码

npx create-next-app@latest my-next-app
cd my-next-app

或使用 yarn：

bash 复制代码

yarn create next-app my-next-app
cd my-next-app

创建时可选择：

TypeScript 支持
ESLint 配置
Tailwind CSS 集成

3.2 运行项目

bash 复制代码

npm run dev

默认在 http://localhost:3000 访问

四、项目结构说明

复制代码

my-next-app/
├── pages/               # 页面组件，自动路由
│   ├── index.js         # 首页
│   └── about.js         # 关于页
├── public/              # 静态资源目录
├── styles/              # 样式文件目录
├── components/          # 可复用组件
├── next.config.js       # 配置文件
└── package.json

五、编写首页示例

js 复制代码

// pages/index.js
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>我的 Next.js 应用</title>
      </Head>
      <h1>你好，Next.js！</h1>
    </div>
  )
}

六、页面导航

js 复制代码

// pages/about.js
import Link from 'next/link'

export default function About() {
  return (
    <div>
      <h2>关于我们</h2>
      <Link href="/">返回首页</Link>
    </div>
  )
}

七、服务端渲染（SSR）与静态生成（SSG）

7.1 SSR：getServerSideProps

js 复制代码

export async function getServerSideProps() {
  return {
    props: { time: new Date().toISOString() },
  }
}

7.2 SSG：getStaticProps

js 复制代码

export async function getStaticProps() {
  return {
    props: { message: '静态生成页面' },
  }
}

八、API 路由（后端接口）

js 复制代码

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' })
}

访问地址：http://localhost:3000/api/hello

九、部署方式

Vercel（推荐）：一键部署，支持自动构建和预览
自定义服务器部署：支持 Docker、PM2 等

十、常见问题

Q1: 编译失败？

尝试 npm install 修复依赖
检查是否启用了 TypeScript 或 Tailwind，确保配置正确

Q2: 页面路径访问不到？

确保文件放在 pages/ 目录，命名正确（支持嵌套路由）

十一、学习资源推荐

本文由"小奇Java面试"原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。