8

I'm using the deufakt i18n localization plugin to translate a webpage, but I want to turn off localization for my /blog route.

Basically what I want is this:

mypage.com/es/anotherRoute -> mypage.com/blog (The es or any other language code goes away)

But that's not the main thing I want to achieve. The biggest problem is I'm not able to build the next app.

The error is basically that the post in [slug] is undefined when it's getting prerendered. Although it shouldn't be, because if I console.log it, it's there.

[slug]

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) {
    // Giving the page no props will trigger a 404 page
    return { props: {} };
  }

  return {
    props: {
      post: pageData,
      allPosts,
    },
    revalidate: 1,
  };
}

export default BlogPage;

My pages folder:

pages
├── [[...slug]].js
├── _app.js
├── _document.js
└── blog
    ├── [slug].js
    └── index.js
Filip
  • 855
  • 2
  • 18
  • 38

4 Answers4

7

There is ignoreRoutes property in i18n plugin config

i18n: {
    defaultLocale: 'en',
    locales: availableLocalesMap,
    ignoreRoutes: [
        '/blog/',
        '/public/'
    ],
},

UPD: It is no longer valid, so now we are free to work around this as we want

The link to github discussion provided by @neuroine in comments, might prove useful:

https://github.com/vercel/next.js/discussions/28554

Nikita Mazur
  • 1,602
  • 1
  • 5
  • 14
1

If someone is looking to use an /api route it's possible if you just add to the <Link href="/api/auth/" locale={false}/>.

https://nextjs.org/docs/api-reference/next/link

Manuel Bichler
  • 507
  • 5
  • 10
0

I was doing a similar thing, i needed to disable any defined locales but default one (there are different default locales for different app instances)

It has been done by

export function middleware(req: NextRequest) {
   if (process.env.DEFAULT_LOCALE && process.env.DEFAULT_LOCALE !== req.nextUrl.locale) {
    return NextResponse.redirect(req.nextUrl.origin + '/404');
  }
}
Nikolay Shabak
  • 576
  • 1
  • 7
  • 18
0

In my project, I applied translation using i18n. However, not all pages were meant to have translations, and when I started the deployment, it would throw an error.

I'm not sure if the solution I found for my issue would be feasible for you, but I resolved it using Next.js 'redirects' feature, as follows:

async redirects() {
      return [
         {
            source: '/es/project/page',
            destination: '/project/page',
            permanent: false,
          },
      ]
}

The routes for which there is no translation, I simply redirected to the original URL, which doesn't have a translation, and added permanent: false because they will have the translation in the future.

I hope this can help you in some way

The answer was provided here.

Mateus Ranzani
  • 1