DEV Community: Albert

Localization in Nextjs with App Router

Albert — Tue, 30 Jul 2024 11:38:06 +0000

Localization is a very important aspect of building an application, especially when you have users with different languages in a new target market. The goal of localization is to break down the communication barriers making content more accessible to everyone. It's not something we think about but it's very important.
In this article, we will be looking at how to set up localization in nextjs application with the app router.

What we will cover in this post

Create a new nextjs application
Install the 118next package
Write translation files
Configure the next-intl package
Tailor our internationalization library according to our needs

For the purposes of the post, we will be building out a basic e-commerce application. To see a live working version of this blog post, check out the demo-app over here. You can also access to the complete source code on github here too.

Create a new nextjs application

I prefer to use pnpm but you can any package manager of your choice.



pnpm create-next-app@latest

Install the `next-intl` library



pnpm install next-intl

Create Messages file

After the installation, the first step is to create a messages folder at the root of your application
You can save the messages locally or fetch them from a remote source depending on your workflow.

At the root of your project, create a messages folder where you can create JSON files for each locale like below.



{
  "Index": {
    "title": "Hello world!"
  }
}

Configure Plugin

The next step is to configure the createNextIntlPlugin plugin from the next-intl package in your next.config files. This plugin will provide the i18n configuration to the server components as follows:



import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

Create `i18n.ts` file to setup the configuration

After this, create a i18n.ts file. This is to create a request-scoped configuration that can be used to provide messages based on the user's locale in the server components



import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";

const locales = ["en", "de"];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

Create a middleware to handle requests

Middleware is used to determine the locale for each request and handle redirects accordingly. In this step, you'll list all the supported locales for your application and match them with the pathnames. You can also set a default locale so that incoming requests automatically default to it if no specific locale is specified.



import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/', '/(de|en)/:path*']
};

This code sets up middleware that supports English and German, with English as the default locale. It will match the specified paths and handle locale-based routing for your application.

Create a locale in the `app/[locale]/layout.tsx` file

Since we have already set up the middleware with the respective locales, we can retrieve the matched locale from the params and use it to configure the page language in the layout.tsx file. We will then pass the messages to the NextIntlClientProvider.



import { AbstractIntlMessages, NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { Header } from "./Header";
import ProductCard from "./Card";
import { HeroSection } from "./HeroSection";

export default async function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider
          messages={JSON.stringify(messages) as unknown as AbstractIntlMessages}
        >
          <div className='max-w-6xl mx-auto p-12'>
            <Header />
          </div>
          <HeroSection />
          <main className='max-w-6xl mx-auto p-12'>{children}</main>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Your project structure should look like this

├── public/
├── messages/
│ ├── en.json
│ └── de.json
├── src/
│ ├── config.ts
│ ├── i18n.ts
│ ├── middleware.ts
│ ├── navigation.ts
│ ├── app/
│ │ └── [locale]/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── components/
│ └── pages/
│ ├── index.js
│ └── about.js
├── package.json
└── README.md

Rendering i18n messages with the `useTranslations` hook

It is now time to render the 118next messages based on the user settings in the UI. next-intl provides a useTranslations hook used to render the messages. The hook takes in a namespace or a key based on the structure of your "language.json" file.
To illustrate let's integrate the translation capabilities into our product app starting from the hero HeroSection. In our application we have



 "Hero": {
    "title": "Der beste Online-Shop der Welt für Laptops und Macbooks",
    "ctaButton": "Jetzt kaufen"
  },



import { useTranslations } from "next-intl";

export const HeroSection = () => {
  const t = useTranslations("Hero");
  return (
    <section className='Hero-banner flex items-center justify-center lg:p-8 p-4'>
      <div className='flex flex-col'>
        <h1 className='lg:text-3xl text-lg text-white text-center'>
          {t("title")}
        </h1>
        <div className='flex items-center justify-center'>
          <button className='bg-black text-white px-6 py-2 w-fit my-8'>
            Shop Now
          </button>
        </div>
      </div>
    </section>
  );
};

It uses the key to retrieve the corresponding messages.
Now when you check your browser on http://localhost:3000/en, it shows the English version of the translations while http://localhost:3000/de shows the German version like below

Interpolation of dynamic values

This is a technique that can be used to insert dynamic values into a prefixed text.



"message": "Hello {name}!"

We can replace the {name} with a dynamic value



t('message', {name: 'Albert'});

resulting in



"Hello Albert"

next-intl also supports formatting rich texts with custom tags



{
  "message": "Please refer to <guidelines>the guidelines</guidelines>."
}



t.rich('message', {
  guidelines: (chunks) => <a href="/guidelines">{chunks}</a>
});

To render an array of messages, we can map over the keys to the corresponding messages like in our little e-commerce application



    "data": {
      "product1": {
        "title": "Macbook Pro",
        "price": 1200,
        "image": "/products/macbook-pro.jpg",
        "description": "Work on anything, anywhere with the incredibly light and speedy Macbook Air 2020. The M1 chip is a game-changer. It's 3.5x faster than the previous Macbook Air, and packs in 8 CPU and 7 GPU cores so you can take on video-editing and gaming. Plus, it's incredibly power-efficient. The M1 lets you browse for up to 15 hours, or watch Apple TV for around 18 - that's a full flight from London to Sydney!"
      },
     ...others
    }

The recommended approach to render the product cards is to map over the keys like this



import {useTranslations, useMessages} from 'next-intl';

function ProductList() {
  const t = useTranslations('Products');

  const messages = useMessages();
  const keys = Object.keys(messages.Products.data);

  return (
    <ul>
      {keys.map((key) => (
        <li key={key}>
          <h2>{t(`${key}.title`)}</h2>
          <p>{t(`${key}.description`)}</p>
        </li>
      ))}
    </ul>
  );
}

We need to render each product card so we can use Object.values like this



export default function Index() {
  const t = useTranslations("Product");
  const messages: any = useMessages();

  const products = Object.values(messages.Product.data) as unknown as Product[];

  return (
    <div>
      <div className='mt-4'>
        <div className='mb-4'>
          <h1>{t("title")}</h1>
        </div>
        <ul className='grid lg:grid-cols-3 grid-cols-1 gap-9'>
          {products.map((product: Product, i: number) => (
            <li key={i}>
              <ProductCard
                buttonText={t("productCardMeta.buttonText")}
                key={i}
                product={product}
              />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

This should work as expected

Formatting Numbers

You can also format a number within a message



{
  "price": "This product costs {price, number, currency}"
}



t(
  'price',
  {price: 32000.99},
  {
    number: {
      currency: {
        style: 'currency',
        currency: 'EUR'
      }
    }
  }
);

Implementing language switching in Next.js App Router using next-intl

next-intl simplifies language switching in Next.js by automatically handling locale information within standard navigation APIs.
By employing shared pathnames, you can directly map Next.js routes to user-requested URLs without additional complexity.
With this configuration, you gain access to routing components and methods like Link and usePathname, enabling intuitive navigation within your Next.js project.
Create a navigation.ts in your src folder and add the following:



import { createSharedPathnamesNavigation } from "next-intl/navigation";
import { locales } from "./config";

export const { Link, redirect, usePathname, useRouter } =
  createSharedPathnamesNavigation({ locales });

To implement a language switch feature in your Navbar or any desired page, you can attach the pathname to the href property along with a locale. Here’s an example of a Header.tsx component:



"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import Image from "next/image";

import { usePathname } from "next/navigation";

import { locales } from "~/config";

import { LocalLink } from "./LocalLink";

type LocaleItem = "en" | "de";

const NAV_LINKS = ["Shop", "Cart"];

export const Header = () => {

  const [selected, setSelected] = useState<LocaleItem>();

  const pathname = usePathname();

const localePath = pathname.split("/")[1];

const handleChangeLocale = (item: LocaleItem) => {

    setSelected(item);

  };

useEffect(() => {

    setSelected(localePath as LocaleItem);

  }, [localePath]);

return (

    <header className='flex items-center justify-between'>

      <h1>Tech Shop</h1>

  &lt;ul className='flex items-center gap-2'&gt;
    {NAV_LINKS.map((nav) =&gt; (
      &lt;li key={nav}&gt;
        &lt;Link href='#'&gt;{nav}&lt;/Link&gt;
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;
  &lt;div className='relative flex items-center justify-center rounded-full'&gt;
    &lt;ul className='bg-white flex'&gt;
      {locales.map((locale, i) =&gt; (
        &lt;li
          key={i}
          onClick={() =&gt; handleChangeLocale(locale as LocaleItem)}
          className={`border-l border-t border-b last:border-r ${
            selected === locale ? "bg-gray-100" : ""
          }`}
        &gt;
          &lt;LocalLink
            locale={locale}
            className={`flex p-4 items-center gap-2`}
          &gt;
            &lt;Image
              src={`/icons/${locale}.svg`}
              alt=''
              height={20}
              width={20}
              className='rounded-full'
            /&gt;
            &lt;h4 className='uppercase text-sm'&gt;{locale}&lt;/h4&gt;
          &lt;/LocalLink&gt;
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/header&gt;



);

};

Wrapping up

I hope this post was helpful to you. You can find the complete source code on github and the demo-app over here.
You can read more on the official documentation site

The full guide is published here on my personal website 😉

References

next-intl documentation

Socketio chat app with node and mysql

Albert — Mon, 10 Aug 2020 12:05:00 +0000

Hello guys, am building a chat app with node and socket.io . I have persisted the data to mysql database successfully. Now, my next task is to retrieve the data and display on the web page so when it refreshes, it doesn't go away. This is what I have done so far.
Below is my code.

server.js
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "live_chat",
});
app.use("/chat_messages", (req, res) => {
  db.query("SELECT * FROM chat_messages", (error, messages) => {
    res.end();
  });
});
app.use(express.static(path.join(__dirname, "public")));
const botName = "Admin✅";
io.on("connection", socket => {
  socket.on("joinRoom", ({ username, room }) => {
    const user = userJoin(socket.id, username, room);
    db.query("INSERT INTO users (username) VALUES (' " + username + " ')");
    socket.join(user.room);
    socket.emit(
      "message",
      formatMessage(
        botName,
        `${username} you're welcome to laronshalley customer support`
      )
    );
    // broadcast a message when a user connects
    socket.broadcast
      .to(user.room)
      .emit(
        "message",
        formatMessage(
          botName,
          ` ${user.username} has connected to the live chat`
        )
      );
    // get room users
    // io.to(user.room).emit("rootUsers", {
    //   room: user.room,
    //   users: getRoomUsers(room),
    // });
  });
  // listen for events from the client
  socket.on("chatMessage", msg => {
    const user = getCurrentUser(socket.id);
    io.to(user.room).emit("message", formatMessage(user.username, msg));
    db.query("INSERT INTO chat_messages (messages) VALUES (' " + msg + " ')");
  });
  // disconnects when a user closes the tab
  socket.on("disconnect", () => {
    const user = userLeave(socket.id);
    if (user) {
      io.to(user.room).emit(
        "message",
        formatMessage(botName, `oops ${user.username} is disconnected`)
      );
    }
    // // get room users
    // io.to(user.room).emit("rootUsers", {
    //   room: user.room,
    //   users: getRoomUsers(room),
    // });
  });
});
const PORT = 5000 || process.env.PORT;
http.listen(PORT, () => console.log("server is listening on port 5000"));

frontend file
chat.js


const socket = io();
const serverUrl = "http:localhost:5000/chat_messages";
// get username and room from the url
const { username, room } = Qs.parse(location.search, {
  ignoreQueryPrefix: true,
});
// select room
socket.emit("joinRoom", { username, room });
// socket.on("roomUsers", ({ room, users }) => {
//   outputRoomName(room);
//   outputRoomUsers(users);
// });
fetch(serverUrl)
  .then(response => response.json())
  .then(data => console.log(JSON.parse(data)))
  .catch(error => console.log("Oops, something went wrong", error));
socket.on("message", msg => {
  outputMessage(msg);
  // scroll
  chatMessages.scrollTop = chatMessages.scrollHeight;
});
chatForm.addEventListener("submit", event => {
  event.preventDefault();
  const msg = event.target.elements.msg.value;
  // send data to the server
  socket.emit("chatMessage", msg);
  // clear form field
  event.target.elements.msg.value = "";
  event.target.elements.msg.focus();
});
const outputMessage = message => {
  const div = document.createElement("div");
  div.classList.add("message");
  div.innerHTML = ` <p class="meta">${message.username} <span>${message.time}</span></p>
  <p class="text">
   ${message.text}
  </p>`;
  document.querySelector(".chat__messages").appendChild(div);
};

High Order Components (React)

Albert — Sun, 05 Apr 2020 20:21:00 +0000

When will be it be useful to use a high order components in react?

Flutter and Me

Albert — Fri, 01 Nov 2019 08:43:37 +0000

Hello devs ...So I applied to some marketing agency in my locality as a front end developer with specialization in react. I was called for an interview and then I was told they're currently need someone with mobile experience specifically flutter to work on their upcoming apps.

My interviewer told me he was very much impressed with github repo page but he would like me to join them but will learn flutter since that was going to be their main stack for mobile apps. I had to start learning right away and I could tell i was making progress with it. Fast forward to three weeks of my stay , he asked me whether I could build a lock screen . The purpose of this is to display custom ads on them to customers. I told them I could do it but I will take some time. I know somehow I could do it but I just don't know how to go about this, to the execution.

I feel like a fraud and sooner or later I will tagged as incompetent to serve as a developer in their company.

Note: this happens to be my first developer role as I have never had any professional experience before and there is no other developer to look up to. It's all by myself.

Please I need some advice. What should I do?

Redux or Context API?

Albert — Mon, 24 Jun 2019 19:31:12 +0000

Please is advisable to still redux even if you know the context API?

Logic & Problem Solving

Albert — Tue, 11 Jun 2019 06:56:53 +0000

What are some of the tips and tricks you for logic and problem solving in programming as a beginner? How do you put pieces together to create one project without necessary going back to a YouTube or a udemy tutorials? What should you know?

MacBook pro upgrade

Albert — Sat, 26 Jan 2019 23:20:47 +0000

So I got a MacBook pro with 8GB of RAM and a storage of 128GB for sometime now but am running out of space and am thinking of upgrading to 512GB. Is this a good idea?. Will it be less performant?

The difference between HTTPS and HTTP

Albert — Sat, 25 Aug 2018 08:55:24 +0000

What is the difference between http and https?

Some of you may be aware of this differencde, but it is
worth sharing for many that are not.

The main difference between http:// and https:// is all about keeping you secure.

HTTP stands for Hyper Text Transfer Protocol.

The S (big surprise) stands for "Secure". If you visit a Website or web page, and look at the address in the web browser, it is likely begin with the following: http:///.

This means that the website is talking to your browser using
the regular unsecured language. In other words, it is possible for someone to "eavesdrop" on your computer's conversation with the Website. If you fill out a form on the website, someone might see the information you send to that site.

This is why you never ever enter your credit card number in an
Http website! But if the web address begins with https://, that means your computer is talking to the website in a
Secure code that no one can eavesdrop on.

Now, you understand why this is so important, right?

If a website ever asks you to enter your Credit/Debit card
Information, you should automatically look to see if the web
address begins with https://.

If it doesn't, you should NEVER enter sensitive Information such as a credit/debit card number.

While checking the name of any website, first look for the domain extension (.com or .org, .co.in, .net etc). The name just before this is the domain name of the website. Eg, in the above example, http://amazon.diwali-festivals.com, the word before .com is "diwali-festivals" (and NOT "amazon"). So, this webpage does not belong to amazon.com but belongs to "diwali-festivals.com", which we all haven't heard of before.
You can similarly check for bank frauds.
Before your ebanking logins, make sure that the name just before ".com" is the name of your bank. "Something.icicibank.com" belongs to icici; but, icicibank.some1else.com belongs to "some1else.

What are the dos and dont of building a startup as a developer?

Albert — Sat, 04 Aug 2018 17:09:02 +0000

Go or Python and why?

Albert — Fri, 18 May 2018 19:11:45 +0000

So a friend of mine was considering either learning python òr go. What would be your advice to him?

Is Ruby lang dying?

Albert — Sat, 24 Mar 2018 22:45:58 +0000

Is ruby dying?

Business in tech

Albert — Mon, 15 Jan 2018 09:55:24 +0000

Aside the technical skills of a developer, what other skills are important especially for someone trying to build a start-up in this age?
All submissions are welcome. Thanks