A Simple Guide to NextJS SSR and Multilingual Support with Storybook

To make your web app both fast and friendly to users worldwide, you need to focus on two things: server-side rendering (SSR) and supporting many languages. For Next.js apps, the next-intl library is great for handling different languages. However, when you’re working with SSR components in tools like Storybook, it might not be straightforward. This guide will take you step by step on how to use special features called decorators in Storybook. These decorators help you easily mix SSR with language support, making sure your React components are ready for anything. We’ll cover everything you need to know to make your app quick, accessible, and international-friendly.

Let’s kick things off by examining a simple React component that we aim to enhance with SSR capabilities:

// HeaderDescription.tsx
import { useTranslations } from "next-intl";
import React from "react";

type HeaderDescriptionProps = {
  name?: string;
  description?: string;
};

const HeaderDescription: React.FC<HeaderDescriptionProps> = (props) => {
  const t = useTranslations("Web");
  const { name = t("name"), description = t("description") } = props;
  return (
    <section className="flex w-full flex-col items-center justify-center">
      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-8">
        <div className="mx-auto place-self-center">
          <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl">
            {name}
          </h1>
          <p className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl">
            {description}
          </p>
        </div>
      </div>
    </section>
  );
};

export default HeaderDescription;

This component utilizes the useTranslations hook from next-intl to fetch translations and render dynamic content based on the provided props.

However, integrating this component into Storybook, particularly with SSR-related dependencies like next-intl, requires careful consideration. We need a mechanism to provide the necessary context for SSR to function correctly. This is where Storybook decorators come into play.

Let’s take a look at how we can achieve this:

import type { Preview } from "@storybook/react";
import { NextIntlClientProvider } from "next-intl";
import React from "react";
import messages from "../messages/en.json";

const preview: Preview = {
  decorators: [
    (Story) => (
      <NextIntlClientProvider locale="en" messages={{ Web: messages["Web"] }}>
        <Story />
      </NextIntlClientProvider>
    ),
  ]
};

export default preview;

In this decorator, we wrap our stories with NextIntlClientProvider provided by next-intl, passing the necessary locale and messages props. This ensures that SSR-related functionalities are properly set up when using our component in Storybook.

Now, let’s integrate our SSR-ready component into Storybook stories:

// HeaderDescription.stories.tsx
import React from "react";
import HeaderDescription from "./HeaderDescription";

export default {
  title: "Components/HeaderDescription",
  component: HeaderDescription,
};

const Template = (args) => <HeaderDescription {...args} />;

export const Default = Template.bind({});
Default.args = {
  name: "Welcome",
  description: "This is a sample description.",
};

With everything set up, we can seamlessly use our SSR-ready component within Storybook, ensuring a smooth development and testing experience across different locales.

In conclusion, by leveraging Storybook decorators, we can seamlessly integrate SSR-ready React components into our development workflow, ensuring robust internationalization support. This approach not only streamlines development but also enhances collaboration and ensures a consistent user experience across diverse language settings.

DCoderAI

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit DCoder.AI to find out more about how we are democratizing free programming education around the world.

Explore Our MicroSaaS Apps!

🚀 DCodeAI 🌐: Revolutionize your business with our suite of MicroSaaS apps designed to streamline operations and boost efficiency. Learn more about how we can help at DCodeAI (https://dcoder.ai/).

SmartEReply 💬: Enhance your LinkedIn interactions with SmartEReply, the AI-powered assistant that crafts perfect responses every time. Start communicating smarter at SmartEReply (https://smartereply.com/)

OrbicAI 🤖: Discover the best AI tools with our comprehensive directory. Whether you’re looking for GPT tools or specific applications like AWS Partyrocks, OrbicAI is your go-to resource. Dive into the AI landscape at OrbicAI. (https://orbic.ai/)