Next.js 在 next.config.js 中动态重定向

Question

我想在项目构建后更新重定向路由。所以，我们在 BE Api 上有一个重定向路由。

我想获取它并动态地实现到 next.config.js，这是我尝试做的。

const getUrls = () =>
    new Promise(resolve => {
        setTimeout(() => resolve(fetch("https://api.mocki.io/v1/a0b7f0b0").then(function(response) {
            return response.json();
          }).then(function(data) {
            return data.data;
          }) ), 3000);
    });

    // ExampleResponse = {
    //     "data":[
    //         {
    //             "source":"/test",
    //             "permanent":true,
    //             "destination":"/internet-application"
    //         }
    //     ]
    // }
    
module.exports = {
    poweredByHeader: false,
    async redirects() {
        return getUrls();
      },
}

有什么解决办法可以做到这一点吗？我只想从数据库更新重定向。如果数据库更新，我们可以在不停止项目的情况下触发重定向

Answer 1

您可以在构建时动态生成重定向路径，代码中的问题是您需要

await

才能解决

getUrls

承诺。

module.exports = {
    poweredByHeader: false,
    async redirects() {
        return await getUrls();
    }
}

您还可以简化

getUrls

根本不使用

setTimeout

。

但是，如果您想在 运行时 更新重定向，则必须为此设置自己的 自定义服务器。

Answer 2

是的，您可以在构建时动态生成重定向路径，就像这样。

 const getRedirects = async () => {
  const url = `https://${domain}/redirects`;
  const res = await fetch(url, {
    method: "GET",       
  });
  const redirects = await res.json();
  return redirects
};

现在在下一个配置对象中传递：

  async redirects() {
    return await getRedirects();
  },

确保返回的对象列表如下：

{
    "source":"/test",
    "permanent":true,
    "destination":"/internet-application"
}

Answer 3

这对我使用 Strapi CMS v5 很有帮助 （https://www.npmjs.com/package/strapi-plugin-redirects）

在 nextjs v13 中

创建redirects.js

const getRedirects = async () => {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_API}/redirects`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();

    return data.redirects.map(({ from, to, type }) => ({
      source: from.startsWith('/') ? from : `/${from}`,
      destination: to,
      permanent: type === 'moved_permanently_301',
    }));
  } catch (error) {
    console.error('Failed to fetch redirects:', error);
    return [];
  }
};

module.exports = getRedirects;

添加

const getRedirects = require('./lib/redirects'); 
...
  async redirects() {
    return await getRedirects();
  }

到 next.config.js

/** @type {import('next').NextConfig} */
const getRedirects = require('./lib/redirects'); 

const nextConfig = {
  reactStrictMode: true, //React StrictMode renders components twice on dev server
  swcMinify: true,
  optimizeFonts: true,
  compress: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
      },
    ],
    minimumCacheTTL: 1500000,
  },
  experimental: {
    fontLoaders: [{ loader: "@next/font/google" }],
  }, 
  async redirects() {
    return await getRedirects();
  }
};

module.exports = nextConfig;