如何解决没有自定义服务器的可选动态路由-NextJS-9.5.2
我正在尝试使用诸如/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
吗?
解决方法
我认为您正在谈论此功能。看看这个https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers
,要扩展@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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。