Next.js

约 305 字大约 1 分钟...

Next.js 是基于 React 的 web 应用开发框架，它的部署偏复杂，但生态较多。

i18n

Next.js 的国际化一般通过 next-intl 来实现。不过注意，独立函数是需要包装为组件才能实现 i18n。

如果你需要将 Next.js 项目静态导出，步骤需参考 Static rendering 静态渲染。

主题切换

最近偏爱暗色主题，因此使用 next-themes 更改了项目布局。

CORS

我的一些公开 API 是基于 Nextjs 的，因此需要解决跨域问题。

修改 next.config.mjs 配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  //含api不支持静态输出，比如deepl中转翻译
  //output: "export",
  async headers() {
    return [
      {
        source: "/api/:path*", // 匹配所有 API 路由
        headers: [
          { key: "Access-Control-Allow-Origin", value: "*" },
          { key: "Access-Control-Allow-Methods", value: "GET, POST, PUT, DELETE, OPTIONS" },
          { key: "Access-Control-Allow-Headers", value: "Content-Type, Authorization" },
        ],
      },
    ];
  },
};

export default nextConfig;

HTML 路径

Next.js 14 中，默认生成的 URL 不会包含 .html 后缀。如果你使用静态页面，建议在 Nginx 配置中添加重写规则：

location / {
    try_files $uri $uri/ $uri.html =404;
}

这个规则会让 Nginx 自动尝试添加.html 后缀。

你认为这篇文章怎么样？

昵称

邮箱

网址

按正序
按倒序
按热度

Next.js

i18n

主题切换

CORS

HTML 路径

预览: