在 Next.js 中，静态导出路由（Static Export）是将页面渲染为静态 HTML 文件，这些文件不依赖于服务器，而是可以直接部署到静态服务器上并通过 CDN 服务进行缓存。这种方式可以实现更快的加载速度和更好的用户体验。下面是在 Next.js 中进行静态导出路由的具体步骤以及相关注意事项。
- 在
next.config.js文件中设置output为'export'：
module.exports = {
// ...
output: 'export',
// ...
};- 在页面组件中，使用
getStaticProps方法从后端获取数据：
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}- 在页面组件中，使用
getStaticPaths方法定义动态路由：
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/routes');
const routes = await res.json();
const paths = routes.map((route) => ({ params: { id: route.id } }));
return {
paths,
fallback: false,
};
}- 在页面组件中，使用
getStaticProps方法获取路由参数对应的数据：
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/data/${params.id}`);
const data = await res.json();
return {
props: {
data,
},
};
}- 在页面组件中，使用
Link组件来链接到动态路由页面：
import Link from 'next/link';
export default function HomePage({ routes }) {
return (
<ul>
{routes.map((route) => (
<li key={route.id}>
<Link href={`/routes/${route.id}`}>
<a>{route.title}</a>
</Link>
</li>
))}
</ul>
);
}
export async function getStaticProps() {
const res = await fetch('https://api.example.com/routes');
const routes = await res.json();
return {
props: {
routes,
},
};
}在使用静态导出路由时，有一些需要注意的事项：
- 动态路由的每个路径都必须在构建时就已知，否则无法生成相应的 HTML 文件。如果未知的路由被访问，Next.js 将返回 404 错误页面。
- 如果需要更改动态路由，必须重新构建整个应用程序。这意味着每次更改都需要重新部署整个应用程序。
- 动态路由的数量和大小对构建和部署时间都有影响，可能会导致更长的构建和部署时间。建议在必要时才使用动态路由。
- 静态导出的页面不能使用客户端数据获取技术，如
useEffect和useState。如果需要在客户端获取数据，可以使用 Next.js 提供的客户端数据获取技术，如getStaticProps和getStaticPaths。
