CORS
https://github.com/vercel/next.js/blob/canary/examples/api-routes-cors/pages/api/cors.ts
next.config.js
如果你使用 public 目录的资源，next-images 是必须的。
const withImages = require('next-images');
module.exports = withImages(其他配置);
渲染方式
next.js 有两种渲染方式：
- Static Generation(SSG)
- Server-side Rendering(SSR)
官方推荐 SSG，因为在 build 阶段就生成了全部页面的 html，还可以使用 CDN，性能远胜于 SSR。
如何选择？
- 当构建的时候就已经知道要展示的全部内容时，使用 SSG。比如个人博客，较少更新，可以在新文章发布的时候，重新构建一次提交。
- 当不确定要展示的内容时，使用 SSR。比如写作平台，不止一个人会发布内容，无法一次性构建全部内容，需要搭配数据后端使用。
SSG
SSG 一般需要 getStaticProps和getStaticPaths组合使用。
getStaticPaths 获取所有需要渲染的 slug, getStaticProps使用 params 获取到这个 slug，在 build 阶段 fetch 这个 slug 对应的数据。
在开发时构建，因此不需要 nodejs 服务器。
getStaticProps
属于 SSG，在 build 时期运行，只运行一次。
getStaticPaths
getStaticProps 依赖此函数来渲染路径，比如：
pages/posts/[id].js 中的 id 需要由 getStaticPaths 返回。
真实案例
// 从后端获取用户列表: [{...},{...}]
const getAllAuthors = async (): Promise<AuthorProps[]> => {
const res = await fetch(`${getPrefix()}/wp/v2/users/`);
const authors = await res.json();
// console.log('getAllAuthors:', authors);
return authors;
};
// 从用户列表遍历出全部 slug 列表
export const getStaticPaths: GetStaticPaths = async () => {
const authors = await getAllAuthors();
// console.log('authors in getStaticPaths:', authors);
return {
paths: authors.map((item) => ({
params: {
slug: item.slug, // 对应 [slug].js
},
})),
fallback: false,
};
};
// 每个 slug 渲染一个页面
export const getStaticProps: GetStaticProps = async ({ params }) => {
// params contains the post `slug`.
// If the route is like /arvin, then params.slug is arvin
const res = await fetch(`${getPrefix()}/wp/v2/users/?slug=${params?.slug}`);
const authors = await res.json();
console.log('authors in getStaticProps:', authors);
// Pass authors data to the page via props
return { props: { ...authors[0] } };
};
SSR
用户访问 [slug]页面，getServerSideProps使用 params 获取到这个 slug，在服务端 fetch 这个 slug 对应的数据。
因为有服务端代码，所以 SSR 需要 nodejs 服务器。
getServerSideProps
在服务端运行，每次有新请求都运行。
当页面内容需要实时更新或者经常变化的时候，你需要使用 SSR。
示例代码
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
// params contains the post `slug`.
// If the route is like /arvin, then params.slug is arvin
const res = await fetch(`${getPrefix()}/wp/v2/users/?slug=${params?.slug}`);
const authors = await res.json();
if (authors.length === 0) {
return {
notFound: true,
};
}
// Pass authors data to the page via props
return { props: { ...authors[0] } };
};
NODE_ENV
next.js 使用非标准的 NODE_ENV，next dev 使用 development，next build 使用 production，通过 crosss-env 去设置将不会生效。
next-transpile-modules deprecated
All features of next-transpile-modules are now natively integrated in Next.js 13.1: next-transpile-modules is now officially deprecated
-const withTM = require('next-transpile-modules')(['awesome_module']);
-module.exports = withTM({});
+module.exports = {
+ transpilePackages: ['awesome_module'],
+};
扩展阅读
- Next.js ignoring NODE_ENV=development
- https://nextjs.org/docs/basic-features/pages
- https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props
- https://blog.logrocket.com/getinitialprops-vs-getserversideprops-nextjs/
- https://dev.to/dmuraco3/when-to-user-server-side-rendering-vs-static-generation-in-nextjs-8ab