[英]Next.js 404 page with i18n
I have a blog posts page where I list bunch of posts.我有一个博客文章页面,其中列出了一堆文章。 Clicking on each of the posts leads to a [slug].js file.
单击每个帖子会导致一个 [slug].js 文件。
The default english locale works great.默认的英语语言环境效果很好。 However, the other locales throw 404 page when trying to open individual blog posts.
但是,其他语言环境在尝试打开单个博客文章时会抛出 404 页面。
My code is below.我的代码如下。 I suspect the problem is somewhere in the next.config.js file, but I'm not sure where.
我怀疑问题出在 next.config.js 文件中,但我不确定在哪里。
The default url works fine:默认网址工作正常:
localhost:3000/blog-posts/some-blog-post
But this one throws 404:但是这个抛出 404:
localhost:3000/de/blogeintraege/some-blog-post
Any advice / help is appreciated!任何建议/帮助表示赞赏!
next.config.js
module.exports = {
basePath: '',
reactStrictMode: true,
i18n: {
locales: ['en', 'de'],
defaultLocale: 'en',
},
async rewrites() {
return [
{
// does not handle locales automatically since locale: false is set
source: '/de/blogeintraege',
destination: '/blog-posts',
locale: false,
},
...
}
} }
blog-posts.js
export default function BlogPosts({ children, posts }) {
const router = useRouter();
const { locale } = router;
const routeTranslation = locale === 'en' ? enRoutes : deRoutes
return (
<div className="container p-4">
<div className="row justify-content-center">
{
posts.categories.edges[0].node.posts.edges.map(post => (
<div className="col-12 col-sm-10 card" key={post.node['slug']}>
<Link href={routeTranslation.publications + '/' + post.node['slug']} key={post.node['slug']}>
<div className="d-flex">
<div className="mb-3">
<img src={post.node['featuredImage']['node']['sourceUrl']} />
</div>
</div>
</Link>
</div>
))
}
</div>
</div>
)
}
export async function getStaticProps({locale}) {
const where = locale === "en" ? "Publishing" : "Blogeintraege";
const res = await fetch('https://example.com/graphql', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
query: `
query MyQuery {
categories(where: {name: "${where}"}) {
edges {
node {
posts {
edges {
node {
featuredImage {
node {
sourceUrl
}
}
customUrl {
customUrl
}
title
slug
}
}
}
}
}
}
}
`,
})
})
const json = await res.json()
return {
props: {
posts: json.data,
},
}
}
blog-posts/[blog-post].js
const BlogPost = ({ blogpost }) => {
const router = useRouter();
const { locale } = router;
const translation = locale === 'en' ? en : mk;
return (
<div className="container p-4">
<div className="row justify-content-center">
<div className="col-12 card">
</div>
<div className="text-white text-break px-4 text-cms" dangerouslySetInnerHTML={{ __html: blogpost.content }} />
</div>
</div>
</div>
)
}
export async function getStaticPaths({locale}) {
const res = await fetch('https://example.com/wp-migration/graphql', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
query: `
query MyQuery {
posts(first: 100, where: {categoryName: "Publishing"}) {
nodes {
slug
}
}
}
`,
})
})
const json = await res.json()
return {
paths: json.data.posts.nodes.map(blogpost => {
return {
params: {
blogpost: blogpost.slug
},
};
}),
fallback: false,
};
}
export async function getStaticProps({ params }) {
const res = await fetch('https://example.comwp-migration/graphql', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
query: `
query MyQuery {
postBy(slug: "${params.blogpost}") {
title
content
featuredImage {
node {
sourceUrl
}
}
}
}
`,
})
})
const json = await res.json()
return {
props: {
blogpost: json.data.postBy,
},
};
}
export default BlogPost
You are missing a rewrite for the [slug] route, so it doesn't register.您缺少对 [slug] 路由的重写,因此它不会注册。 From the NextJs documentation
来自NextJs 文档
I think adding this to your rewrites()
in next.config
will work, but wasn't able to test it myself.我认为将其添加到 next.config 中的
next.config
rewrites()
中会起作用,但我自己无法对其进行测试。
{
source: '/de/blogeintraege/:slug*',
destination: '/blog-posts/:slug*',
locale: false,
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.