Next.js启动打包部署（out、standalone）
Next.js启动打包部署（out、standalone）
本文将分享使用Next.js框架进行全栈项目开发的经验，包括项目启动、打包部署以及遇到的一些问题和解决方案。
一、启动
- Node.js版本要求：需要大于18.17
- 创建项目：在指定文件路径下执行以下命令
npx create-next-app@latest - 按需安装可选项
- 启动项目：进入项目目录后执行
浏览器打开：http://localhost:3000/ 即可看到页面，随意改点东西看到，页面热更新正常npm run dev
App路由
这里我们在安装时使用的是app router，约定式路由，src/app下创建/about/page.tsxt，
文件夹about即为路径，文件page.tsx为页面
eg: 简单创建一个about页面
page页面跳转about
API
正常api会操作数据库等，这里简单写一个服务端api，也是约定式路由，在src/app下创建/api/user/route.ts
import { NextResponse } from 'next/server'
export async function GET(req: any) {
try {
const data = [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
]
return NextResponse.json({ data }, { status: 200 })
} catch (error) {
console.error('Error:', error)
return NextResponse.json(
{ error: 'Internal Server Error' },
{ status: 500 }
)
}
}
浏览器访问：http://localhost:3000/api/user 即可看到数据返回
封装axios
前端接口请求一般可以用fetch或者axios，这里项目用了axios，首先安装axios，终端执行npm i axios
npm i axios
app文件夹下新建两个文件，/request/index.js和/request/app.js，一个是axios的封装，一个是请求api方法
// request/index.js
import axios from 'axios'
const service = axios.create({
baseURL: '/',
timeout: 50000
})
// 请求拦截器
service.interceptors.request.use(config => {
return config
}, error => {
return error
})
// 响应拦截器
service.interceptors.response.use(response => {
if (response.status) {
switch (response.status) {
case 200:
return response.data
case 401:
//未登录处理方法
break
case 403:
//token过期处理方法
break
default:
console.log();(response.data.msg)
}
} else {
return response
}
})
export default service
// /request/app.js
import service from "./index"
export const getUserList = (params) =>
service({ url: "/api/user", method: "get", params })
页面请求数据
在page.tsx请求数据渲染即可
至此，简单的项目搭建完成。
二、打包部署
默认打包
npm run build打包完成后，需要拷贝.next、node_modules、public、package.json四个文件到服务器
服务器需要安装node环境，https://nodejs.cn/en/download
执行npm run startnpm run start页面打开：http://localhost:3000 正常访问
项目部署完成，四个文件占用356MB，node_modules占用303MB，我们正常开发vue、react项目打包后无需node_modules，能否去掉
删除node_modules再启动，发现无法启动：静态打包out
前面说了默认打包，需要node.js环境和拷贝node_modules文件夹，如果我们只用了next.js静态部分，没用到api服务，官方提供了静态打包方式。
在配置文件next.config.mjs中添加output: ‘export’
再执行npm run build打包
打包后，可以看到根目录下生成了out文件夹（0.98MB），拷贝out到服务器，通过nginx等代理即可
nginx配置：
打开：http://localhost:82/ 访问
可以看到页面能正常访问，而且api用户列表也能显示？？？
按理说都静态打包了，咋还能看到api服务，其实这是next.js的静态处理，或者说缓存，是一种自动行为，Next.js认为并不是每次GET请求都需要重新计算，所以干脆直接处理成静态数据提升性能。
如果想动态处理：
- 操作cookies()、headers() 函数
const token = request.cookies.get('token')
- 改成POST方法
- 在页面引入动态模块：
export const dynamic = 'force-dynamic'
但是动态处理和静态打包冲突报错，所以静态打包最好就不要api了
- standalone单独部署
前面说了默认打包时需要拷贝node_modules，导致项目体积很大；而且随着项目的开发，依赖包一般可能达到1个G左右，这就导致部署成本相当高。做过express应用应该知道，node的服务依赖包其实不多，这里的node_modules很多都是前端的依赖，我们都打包了，其实没必要带着这些依赖。所以next.js还推出了一种打包方式：standalone。
直接在配置文件next.config.mjs中加上output: ‘standalone’
再执行npm run build打包，可以看到在.next文件夹中生成了standalone和static文件夹
standalone相当于一个express应用，包含server.js和少量的服务端依赖node_modules
static是前端包
部署时，需要拷贝static到standalone/.next文件夹下，拷贝外层public文件夹到standalone下
进入standalone目录，执行node server.js
node server.js
打开页面：http://localhost:3000/和接口：http://localhost:3000/api/user都能正常访问。
standalone只有19MB，相对于默认打包方式存储大大减少，不知道官方为啥不作为默认打包方式，有时间再研究。
嫌拷贝static麻烦的朋友可以在package.json中增加配置：
"build": "next build && npm run move",
"move": "xcopy /e /i .next\\static .next\\standalone\\.next\\static"
三、其它问题
Q1：接口有缓存？
实际项目时，发现查询sql数据不对，后面发现是get请求缓存了，前面也说过使用动态模块避免缓存：
export const dynamic = 'force-dynamic'
Q2：You’re importing a component that needs useState. It only works in a Client Component but none of its parents are marked with “use client”, so they’re Server Components by default.
常见的错误，当页面使用useState等功能时，需要在顶部引入
use client
指令，表明当前组件/模块应该在客户端渲染（Client-side Rendering，CSR）
项目地址：https://github.com/qsya/nextjs
中文官网：https://www.nextjs.cn/
英文官网：https://nextjs.org/