Question

我正在尝试使用诸如/lang?/../../之类的可选第一个参数创建本地化路由，但是没有自定义服务器。从9.5开始，如果您使用以下名称设置文件夹或文件，则NextJS具有此选项动态可选参数： [[...param]]。我做到了问题是，我还有其他路线，我希望所有路线都带有该lang前缀，如果未提供该lang，则为默认语言的ut可选

我有一个文件夹[[...lang]]，其中包含index.js文件，其中包含用于测试的简单功能组件。现在，可选参数适用于主页/和/en，但是我还有其他文件，希望与该可选lang一起使用。例如，我有about.js，我想通过/en/about和/about访问它。

我无法将about.js放在[[...lang]]内，因为出现错误：

无法重新加载动态路由：错误：Catch-all必须是URL的最后一部分。

我知道它在说什么，为什么会这样，但是我有一套固定的语言['en', 'fr']，可以检查是否有语言。

有没有一种方法，无需自定义服务器就可以选择使用路径的动态第一部分，例如

/en/about和/about吗？

Answer 1

我认为您正在谈论此功能。看看这个https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers

Answer 2

要扩展@Vibhav中的答案，请使用next.config.js：

const nextConfig = {

    async rewrites(){
        return [
// URLs without a base route lang param like /my-page
            {
                source: '/',
                destination: '/'
            },
// URLs with a base route lang param like /en/my-page

            {
                source: '/:lang*/:page*',
                destination: '/:page*'
            },
// URLs `/en/post/post_id`
            {
                source: '/:lang/:path/:page',
                destination: '/:path/:page'
            },
        ]
    }
};

module.exports = withBundleAnalyzer(nextConfig);

所有页面都在pages文件夹中。暂时还不是最好的解决方案，因为它可以像/pages/another-folder/file一样深入工作。

您甚至可以在页面或_app.js中获得lang参数：

....
const router = useRouter();

if(router.query.lang){
    pageProps.lang = router.query.lang;
}
console.log(pageProps.lang);

return (
    <Layout>
        <Component {...pageProps} />
    </Layout>
)

对于URL-/ en / my-page，router.query.lang等于en。对于URL-/ my-page，router.query.lang将是undefined，但是您可以设置默认的lang。

没有自定义服务器的可选动态路由-NextJS-9.5.2

2 个答案: