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
可通过以下命令验证安装：
node -v
npm -v
三、使用 Create Next App 快速创建项目
3.1 创建项目
npx create-next-app@latest my-next-app
cd my-next-app
或使用 yarn：
yarn create next-app my-next-app
cd my-next-app
创建时可选择：
- TypeScript 支持
- ESLint 配置
- Tailwind CSS 集成
3.2 运行项目
npm run dev
默认在 http://localhost:3000 访问
四、项目结构说明
my-next-app/
├── pages/ # 页面组件，自动路由
│ ├── index.js # 首页
│ └── about.js # 关于页
├── public/ # 静态资源目录
├── styles/ # 样式文件目录
├── components/ # 可复用组件
├── next.config.js # 配置文件
└── package.json
五、编写首页示例
// 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>)
}
六、页面导航
// 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
export async function getServerSideProps() {return {props: { time: new Date().toISOString() },}
}
7.2 SSG：getStaticProps
export async function getStaticProps() {return {props: { message: '静态生成页面' },}
}
八、API 路由（后端接口）
// 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/目录，命名正确（支持嵌套路由）
十一、学习资源推荐
- Next.js 中文文档
- Next.js 官网
- Vercel 部署平台
- 菜鸟教程 Next.js
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
