一、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面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。
