I'm currently utilizing the deufakt i18n localization plugin to translate my webpage, but I have a specific requirement to disable localization for my /blog route.
Essentially, what I want to achieve is:
mypage.com/es/anotherRoute -> mypage.com/blog (The es or any other language code should be removed)
However, the primary issue I am encountering is with building the following app.
The problem lies in the fact that the post in [slug] is undefined during prerendering, even though it should not be as it appears when logged using console.log.
[slug]
/* The JavaScript code snippet */
import ErrorPage from "next/error";
import { getStrapiURL, getPageData, getBlogPost } from "utils/api";
import Sections from "@/components/sections";
import Seo from "@/components/elements/seo";
import { useRouter } from "next/dist/client/router";
import BlogPost from "@/components/blog/blogPost";
const BlogPage = ({ post, allPosts }) => {
const router = useRouter();
if (router.isFallback) {
return <div className="container">Loading...</div>;
}
return (
<>
{/* Add meta tags for SEO*/}
<Seo metadata={post.metadata} />
{/* Display content sections */}
<BlogPost {...{ post, allPosts }} />
</>
);
};
export async function getStaticPaths() {
const blogPosts = await (await fetch(getStrapiURL("/blog-posts"))).json();
const paths = blogPosts.map((page) => {
return {
params: { slug: page.slug },
};
});
return { paths, fallback: true };
}
export async function getStaticProps({ params, preview = null }) {
const pageData = await getBlogPost(params.slug);
const allPosts = await (await fetch(getStrapiURL("/blog-posts"))).json();
if (pageData == null) {
// Providing no props to the page will result in a 404 page
return { props: {} };
}
return {
props: {
post: pageData,
allPosts,
},
revalidate: 1,
};
}
export default BlogPage;
My pages directory structure:
pages
├── [[...slug]].js
├── _app.js
├── _document.js
└── blog
├── [slug].js
└── index.js