7

I'm using NextJs 10.0.5 with next-i18next 8.1.0 to localize my application. As we all know nextJs 10 has subpath routing for internationalized routing. In addition, I need to change the page names by language. For example, I have a contact-us file inside the pages folder. When I change the language to Turkish, I have to use localhost:3000/tr/contact-us. However, I want to use localhost:3000/bize-ulasin to access the contact-us page when the language is Turkish. So there are two URLs and only one page file.

It works when I use custom routing with express js in the server.js file. However, when I want to access the "locale" variable within the getStaticProps function in the contact-us file, I cannot access it. The getStaticProps function returns undefined for "locale" variable when I use localhost:3000/bize-ulasin URL.

server.js

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const app = next({ dev: process.env.NODE_ENV !== "production" });
const handle = app.getRequestHandler(app);

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === "/bize-ulasin") {
      app.render(req, res, "/contact-us", query);
    }else{
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

/pages/contact-us-file

import { Fragment } from "react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const ContactUs = () => {
  const { t } = useTranslation("common");
  return (
    <Fragment>
      <Head>
        <title>Contact-Us</title>
      </Head>
    </Fragment>
  );
};

export const getStaticProps = async ({ locale }) => {
  console.log(locale); // When I use the URL localhost: 3000/bize-ulasin, it returns undefined.
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
};

export default ContactUs;

How can I access the "locale" variable with getStaticProps? Or, how can I use the following URLs with the same page file?

->localhost:3000/contact-us
->localhost:3000/bize-ulasin
Paki
  • 25
  • 1
  • 5
ofsahinler
  • 71
  • 1
  • 3

1 Answers1

3

I also faced the same problem today. That's how I solved the issue.

First of all, delete the server.js file. With Next.JS 10, using server.js will create conflict with the i18n routes and you won't be able to get the locale data in getStaticProps.

NextJS has a beautiful method named rewrites. We will use that instead of our server.js file. For example, if you have a page named contact-us-file, we can rewrite our next.config.js file as

const { i18n } = require('./next-i18next.config')

module.exports = {
    i18n,
    async rewrites() {
        return [
            {
                source: '/contact-us',
                destination: '/en/contact-us-file',
            },
          {
                source: '/bize-ulasin',
                destination: '/tr/contact-us-file',
            },
        ]
    },
}

As you are already using Next-i18next, I hope you are familiar with the file that I am importing.

Now If you try to navigate localhost:3000/contact-us and localhost:3000/bize-ulasin you should be able to access your contact us page.

Khondoker Zahidul Hossain
  • 447
  • 5
  • 9