DEV Community: Rayza Oliveira

Props: Comunicação entre Componentes Pai e Filho no React

Rayza Oliveira — Tue, 23 Jan 2024 21:46:45 +0000

No desenvolvimento de aplicações React, uma das funcionalidades chave é a comunicação entre componentes. A principal maneira de um componente interagir com outro é através das suas propriedades, conhecidas como props.

💬 Comunicação através de Props

As props são a forma primária de passagem de dados entre componentes, permitindo que um componente pai envie dados para um componente filho.
Além de dados, é possível passar funções como props, facilitando a comunicação bidirecional entre componentes.

👨‍💻 Exemplo com Componente Pai: Post

export const Post = ({ author, publishedAt, content, deleteComment }: PostProps) => {
  const [comments, setComments] = useState([
    "Lembre-se, cada truque merece um petisco! 🍖",
    // outros comentários
  ]);

  return (
    <div>
      {/* detalhes do post */}
      {comments.map((comment, index) => (
        <Comment
          key={index}
          content={comment}
          onDeleteComment={() => deleteComment(index)}
        />
      ))}
    </div>
  );
};

Neste exemplo, Post é o componente pai que mantém o estado dos comentários e passa uma função onDeleteComment como prop para o componente filho Comment.

✅ Boas Práticas com Props

Ao passar funções como props, é uma boa prática nomeá-las iniciando com on, indicando que são eventos ou callbacks. Por exemplo, onDeleteComment.

🧒 Exemplo com Componente Filho: Comment

export const Comment = ({ content, onDeleteComment }: CommentProps) => {
  return (
    <div>
      {content}
      <button onClick={onDeleteComment}>Excluir</button>
    </div>
  );
};

O componente Comment recebe a prop onDeleteComment e a utiliza para permitir que um usuário exclua um comentário.

🔗 Repositórios dos Componentes:

Comment: GitHub - Comment
Post: GitHub - Post

🎯 Conclusão

Entender como as props funcionam é fundamental para criar aplicações React eficientes e manuteníveis. Elas permitem uma comunicação clara e direta entre componentes, facilitando o gerenciamento de estados e a execução de ações específicas. Ao adotar boas práticas na nomeação e uso de props, desenvolvedores podem garantir um código mais legível e fácil de manter. Assim, as props se tornam uma ferramenta poderosa no kit de ferramentas de qualquer desenvolvedor React, permitindo a construção de aplicações interativas e dinâmicas.

Storybook : Conceitos Fundamentais e Criação de Sua Primeira Story

Rayza Oliveira — Mon, 22 Jan 2024 22:01:13 +0000

O Storybook é recomendado para projetos com perspectivas de crescimento e que possuam uma variedade de componentes, bem como para projetos maduros com muitos componentes. Ele oferece uma solução para que a UI possa ser executada de forma isolada em "stories", evitando a necessidade de rodar toda a aplicação, onde a UI está conectada à lógica e ao contexto de negócios.

Cada "story" permite demonstrar variações específicas de um componente para verificar sua aparência e comportamento. Isso elimina a necessidade de navegar pela página e modificar a UI até encontrar o estado desejado.

Benefícios

Isolamento do componente da página
Capacidade de testar as UIs de forma independente
Geração de documentação, facilitando a localização e reutilização de padrões de UI pela equipe

Instalação do Storybook

npx create-storybook@latest init

Tour pelo Storybook

Caso tenha ignorado o assistente de introdução, você pode executá-lo novamente adicionando o parâmetro de consulta ?path=/onboarding à URL da sua instância do Storybook, contanto que as histórias de exemplo ainda estejam disponíveis.

Executando as Stories

npm run storybook

Sobre as Stories

Uma "story" captura o estado renderizado de um componente de UI. Os desenvolvedores escrevem múltiplas stories por componente para descrever todos os estados "interessantes" que um componente pode apresentar.

Componente Button

Nomeando o arquivo de story. Exemplo: Button.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
import { Button, ButtonProps } from './Button';

const meta: Meta<ButtonProps> = {
  component: Button,
  title: 'Button',
};
export default meta;

export const Primary: StoryObj<ButtonProps> = {
  args: {
    primary: true,
    label: 'Button',
    size: 'medium'
  },
  argTypes: {
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
  },
};

Na barra lateral do Storybook, é possível visualizar o componente Button renderizado.

Args

Args define os argumentos para o componente Button, permitindo a alteração e criação dinâmica de variantes do componente.

Para mais detalhes sobre os args, acesse: Documentação sobre Args

Controles

Os controles oferecem uma ferramenta para interagir dinamicamente com os argumentos dos componentes, sem necessidade de alterações no código.

Para mais detalhes sobre os controles, acesse: Documentação sobre Controles

Conclusão

Ao finalizar nosso passeio pelo universo do Storybook, é evidente como esta ferramenta se torna indispensável para iniciantes e desenvolvedores front-end que buscam aprimorar a criação e o gerenciamento de interfaces de usuário (UIs). Com sua capacidade de isolar componentes e permitir uma visualização e teste independentes, o Storybook não apenas simplifica o processo de desenvolvimento, mas também promove uma maior organização e eficiência.

Para quem está começando, o Storybook oferece uma curva de aprendizado suave e uma documentação rica, facilitando a integração dessa ferramenta em projetos de qualquer escala. Ao dominar suas funcionalidades básicas, como a criação de stories e a utilização de controles e args, os desenvolvedores abrem portas para um desenvolvimento mais ágil e uma colaboração mais efetiva dentro das equipes.

Lembramos que o Storybook é mais do que uma ferramenta; é uma metodologia que incentiva melhores práticas de desenvolvimento, como a reutilização de código e a criação de componentes mais robustos e testáveis. Com o Storybook, iniciantes podem rapidamente se tornar proficientes na arte de construir e gerenciar UIs complexas, fazendo dele uma escolha excelente para qualquer desenvolvedor front-end aspirante a elevar a qualidade e eficiência de seu trabalho.

Avoiding Re-render on Pagination with Relay

Rayza Oliveira — Thu, 14 Dec 2023 13:36:31 +0000

Introduction to Relay

In a world where efficiency and performance of web applications are crucial, Relay emerges as a powerful solution for data management in React applications. Developed by Facebook, Relay is a JavaScript library that provides a robust abstraction layer over GraphQL, a popular data query language. The main goal of Relay is to facilitate the construction of client applications that interact with GraphQL APIs in an efficient and scalable manner.

What is Relay?

Relay is a state and data management library for React applications that use GraphQL as a data query language. Unlike other state management approaches, Relay specifically focuses on optimizing interactions with GraphQL APIs, ensuring that data is loaded and manipulated efficiently.

What is Relay Used For?

Relay serves several fundamental purposes in modern React applications:

Data and Component Colocation: Relay allows developers to define a component's data needs directly in its code, close to the component itself. This improves maintainability and scalability of the application, as data dependencies are explicitly declared and managed.
Query Optimization: One of the biggest advantages of Relay is its ability to optimize GraphQL queries. It automatically aggregates and optimizes multiple queries into a single network request, reducing communication overhead and improving performance.
Application State Management: Relay manages the application's state, including data storage, updates, and cache handling. This relieves developers from the complexity of managing dynamic and related data states.
Pagination and Fragment Management: Relay provides advanced features for handling pagination and data fragments, allowing applications to load large data sets incrementally and efficiently.

Pagination with Relay

One of the challenges in implementing pagination in web applications is avoiding unnecessary re-renders, which can harm performance. Relay, with its advanced state management and caching techniques, offers elegant solutions to this problem, ensuring that only the affected components are updated when new data is loaded. This is especially important in pagination scenarios, where new data is frequently requested and added to the user interface.

Approach with `useQueryLoader` + `usePreloadedQuery` + `useState`

This approach involves using useQueryLoader to load the query, usePreloadedQuery to access the loaded data, and React states to control pagination.

Advantages:

Control Flexibility: Offers granular control over data loading and rendering, allowing customization of pagination behavior as per the specific needs of the application.
Explicit State Management: Facilitates the implementation of complex state logics, such as resetting the list, applying filters, or performing operations beyond simple pagination.

Disadvantages:

Implementation Complexity: Requires manual management of pagination state, increasing the complexity of the code.
Risk of Unnecessary Re-renders: Can lead to unnecessary re-renders of the entire component, affecting performance.
Pagination State Maintenance: Keeping the pagination state synchronized with the loaded data can be challenging and error-prone.

Code Example:

const farmQuery = graphql`
  query FarmWrongPaginationQuery($first: Int!) {
    farms(first: $first) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
`;

const FarmWrongPaginationList = ({
  farmQueryRef,
}: {
  farmQueryRef: PreloadedQuery<FarmWrongPaginationQuery>;
}) => {
  const data = usePreloadedQuery<FarmWrongPaginationQuery>(
    farmQuery,
    farmQueryRef
  );

  return (
    <React.Suspense fallback="Loading...">
      <ul>
        {data.farms?.edges?.map((obj) => {
          return <li key={obj.node.id}>{obj.node.name}</li>;
        })}
      </ul>
    </React.Suspense>
  );
};

export const FarmWrongPagination = () => {
  const [farmQueryRef, loadQuery, dispose] =
    useQueryLoader<FarmWrongPaginationQuery>(farmQuery);

  React.useEffect(() => {
    return () => {
      dispose();
    };
  }, []);

  const [first, setFirst] = React.useState(2);

  React.useEffect(() => {
    loadQuery({ first });
  }, [first]);

  return (
    <React.Suspense fallback="Loading...">
      <Heading variant="h3">FarmWrongPagination</Heading>
      <HelpText>Description why is wrong</HelpText>

      {!!farmQueryRef && (
        <FarmWrongPaginationList farmQueryRef={farmQueryRef} />
      )}

      <Button
        onClick={() => {
          setFirst((prev) => {
            return prev + 1;
          });
        }}
      >
        Load More
      </Button>
    </React.Suspense>
  );
};

In the example above, the entire component re-renders when pagination occurs. See:

Why does this happen?

First, we need to understand how useQueryLoader and usePreloadedQuery work.

useQueryLoader: This hook is used to load a GraphQL query and returns a reference to the loaded query (queryReference). When the parameters of the query change (for example, when changing pagination parameters), useQueryLoader needs to be called again to reload the query with the new parameters.
usePreloadedQuery: This hook uses the queryReference provided by useQueryLoader to access the loaded data. When a new query is loaded with useQueryLoader, usePreloadedQuery accesses the updated data.

Using React States for Pagination
When you combine these hooks with React states to control pagination (for example, using a state to store the value of first or offset), the component needs to be updated every time the state changes. This happens for a few reasons:

State Update: When clicking a "Load more" button, you probably update a state (like first or offset). This triggers an update of the component.
Query Reloading: After the state update, useQueryLoader is called again to reload the query with the new pagination parameters. This also triggers an update of the component.
Data Update: Finally, usePreloadedQuery accesses the new data from the reloaded query, which once again updates the component.

Result: Chain of Re-renders
This chain of updates can lead to multiple re-renders of the component, especially if it is complex or has many children. Each time the pagination state is updated, the entire component goes through a rendering cycle, which can be inefficient, especially if only a small part of the data or UI changes (like adding more items to the list).

How to Optimize

To optimize, you can separate the components in such a way that only the part of the UI that displays the paginated data is updated, instead of re-rendering the entire component. The use of usePaginationFragment is a more efficient approach in this sense, as it handles the data update optimally and minimizes re-renders when adding new items to the list.

Understanding `usePaginationFragment`

usePaginationFragment is a Relay hook designed to work with paginated data following the GraphQL connection pattern. When it receives a command to load more data (for example, items from a list), usePaginationFragment operates intelligently: it generates a new GraphQL query based on the name you defined with the @refetchable attribute in your fragment.

The new query generated by usePaginationFragment automatically includes the correct parameters for pagination, such as after, before, first, and last. This means that instead of redoing the entire query or re-rendering the entire component, usePaginationFragment efficiently loads the additional data and integrates it into the existing data set. Thus, only the new items are added and rendered, maintaining the performance and fluidity of the application.

How `usePaginationFragment` Avoids Unnecessary Re-renders

Incremental Updates: When you load more items using usePaginationFragment, Relay adds these new items to the existing data set incrementally. Instead of replacing all the data and causing a complete re-render, it simply appends the new data. This means that only components displaying the new items need to be updated.
Efficient Data State Management: Relay maintains a normalized and optimized data store. When new data is loaded through loadNext or loadPrevious, Relay updates only the relevant parts of the store. This leads to more efficient UI updates, as only the components that depend on the updated data are re-rendered.
Intelligent Caching and Data Reuse: Relay uses a sophisticated caching system that allows reusing data between different components and queries. This means that if part of the data has already been loaded previously, Relay can reuse it without causing unnecessary re-renders.
Rendering Optimization with Suspense: Relay integrates with React Suspense, allowing you to define suspension points in your application for data loading. This means that Relay can "wait" until all necessary data is available before rendering the component, avoiding partial or incomplete re-renders.

Important to know before work with pagination using `usePaginationFragment` on relay

To determine if the API you're using supports the usePaginationFragment from Relay, you should check several key aspects of the API's structure, particularly how it handles pagination. The usePaginationFragment is designed to work with the GraphQL connection pattern, which includes specific elements. Here's what to look for:

GraphQL Connection Pattern: Check if the API uses the GraphQL connection pattern. This means the API should implement a system of "edges" and "nodes" for lists of data, along with "pageInfo" fields that include "endCursor" and "hasNextPage".
Cursor-based Pagination Support: The usePaginationFragment works well with APIs that support cursor-based pagination. This means the API should allow you to query by specifying a cursor (usually an ID or a token) and a number of items to fetch. Cursors are used to incrementally load subsequent data.
Refetchable Query: To use usePaginationFragment, the GraphQL query needs to be "refetchable". This means it should be structured in a way that Relay can easily redo the query to fetch more data based on the current cursor.
API Documentation: Review the API documentation for any mention of cursor-based pagination or connection patterns support. Often, the documentation will clearly explain how the API handles pagination and whether it is compatible with Relay's requirements.
Testing with GraphQL Tools: You can use GraphQL tools like GraphiQL or Apollo Studio to test the API. Try making a pagination query using cursors to see if the API responds as expected.

If the API meets these criteria, it is likely to support usePaginationFragment. If not, you may need to adopt an alternative approach to pagination or even contact the API maintainers for more information about its pagination capabilities.

Practical Example

Let's consider a component that lists "Farms" using usePaginationFragment:

const farmCorrectPaginationQuery = graphql`
  query FarmCorrectPaginationQuery {
    ...FarmCorrectPaginationFragment_query
  }
`;

const farmCorrectPaginationFragment = graphql`
  fragment FarmCorrectPaginationFragment_query on Query
  @refetchable(queryName: "FarmCorrectPagQuery")
  @argumentDefinitions(
    cursor: { type: "String" }
    count: { type: "Int", defaultValue: 5 }
  ) {
    farms(first: $count, after: $cursor)
      @connection(key: "FarmCorrectPagination_farms") {
      edges {
        node {
          name
        }
      }
    }
  }
`;

const FarmCorrectPaginationList = ({
  farmQueryRef,
}: {
  farmQueryRef: PreloadedQuery<FarmCorrectPaginationQuery>;
}) => {
  const farmsPreloadedQuery = usePreloadedQuery<FarmCorrectPaginationQuery>(
    farmCorrectPaginationQuery,
    farmQueryRef
  );

  const { data, hasNext, loadNext, isLoadingNext } = usePaginationFragment<
    FarmCorrectPaginationQuery,
    FarmCorrectPaginationFragment_query$key
  >(farmCorrectPaginationFragment, farmsPreloadedQuery);

  return (
    <React.Suspense>
      <Flex sx={{ flexDirection: 'column', gap: 'md', alignItems: 'start' }}>
        <ul>
          {data.farms?.edges?.map((obj) => {
            return <li key={obj?.node?.name}>{obj?.node?.name}</li>;
          })}
          {isLoadingNext && <li key="loading">Loading...</li>}
        </ul>

        {hasNext && (
          <Button
            disabled={isLoadingNext}
            loading={isLoadingNext}
            onClick={() => {
              return loadNext(1);
            }}
          >
            Load More
          </Button>
        )}
      </Flex>
    </React.Suspense>
  );
};

export const FarmCorrectPagination = () => {
  const [farmQueryRef, loadQuery, dispose] =
    useQueryLoader<FarmCorrectPaginationQuery>(farmCorrectPaginationQuery);

  React.useEffect(() => {
    loadQuery({});

    return () => {
      dispose();
    };
  }, []);

  return (
    <React.Suspense fallback="Loading...">
      <Heading variant="h3">FarmCorrectPagination</Heading>

      {!!farmQueryRef && (
        <FarmCorrectPaginationList farmQueryRef={farmQueryRef} />
      )}
    </React.Suspense>
  );
};

In this example, when the user clicks to load more, loadNext is called. Relay manages the addition of these new "Farms" to the existing data optimally, without causing unnecessary re-renders in the component. Now see the result:

Conclusion

Using usePaginationFragment in Relay offers a more declarative and optimized approach to managing paginated data in React applications. By dealing with the complexities of incremental data updates and intelligent caching, Relay facilitates the creation of responsive and efficient user interfaces, even when dealing with large sets of data and pagination operations.

Embedding Videos in Markdown using React

Rayza Oliveira — Wed, 04 Oct 2023 17:32:18 +0000

In modern web development, rendering rich content like videos within markdown files is a common requirement. This post demonstrates how to work with videos inside markdowns using React, utilizing a custom React component.

Setup

Firstly, ensure you have a React project set up. In this demonstration, we're using a custom Markdown component from the @ttoss/component package, which is based on react-markdown.

import { Markdown } from '@ttoss/component'; // based on react-markdown

Creating a Markdown Content Component

Let's create a MarkdownContent component to render the content. This component accepts a content prop which is the markdown content as a string.

type MarkdownContentProps = {
  content: string;
};

export const MarkdownContent = ({ content }: MarkdownContentProps) => {
  // component body
};

Customizing the Markdown Component

The Markdown component from @ttoss/component allows us to customize the rendering of HTML elements. In this case, we're interested in customizing the rendering of anchor (<a>) elements to embed YouTube videos.

<Markdown
  components={{
    a: (props: any) => {
      // custom rendering
    },
  }}
>
  {content}
</Markdown>

Obtaining the Embed Link from YouTube

To embed a YouTube video, you need to obtain the embed link for the video. Follow these steps:

Go to the video on YouTube.
Click on "SHARE" below the video.
Click on "Embed".
Copy the URL from the provided code. The URL will be in the format: https://www.youtube.com/embed/VIDEO_ID

Handling Video Links

We need to identify links that are meant to embed videos. In this example, we check if the href attribute of the anchor element contains the strings 'youtube' or 'embed'.

if (['youtube', 'embed'].every((item) => props.href.includes(item))) {
  // custom rendering for video links
}

Embedding the Video

For links identified as video links, we return a custom component structure to embed the video within an iframe.

return (
  <Box
    sx={{
      position: 'relative',
      paddingBottom: ['56.25%', 'calc(56.25% * 0.75)'],
      width: ['unset', '75%'],
      height: 0,
      margin: '0 auto',
    }}
  >
    <Box
      as="iframe"
      sx={{
        border: 'none',
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      }}
      // @ts-ignore
      src={props.href}
      allowfullscreen="allowfullscreen"
    />
  </Box>
);

Usage Example

Here is an example of how you can use the MarkdownContent component with a YouTube video:

const videoMarkdownContent = `
# My Favorite Video
Here is my favorite YouTube video:
[a video](https://www.youtube.com/embed/VIDEO_ID)
`;

function MyApp() {
  return <MarkdownContent content={videoMarkdownContent} />;
}

export default MyApp;

In this example, replace VIDEO_ID with the YouTube video ID you want to embed.

Conclusion

This setup allows you to render markdown content with embedded videos in a React application, providing a rich content experience. By customizing the rendering of markdown elements, you can handle various content types and create a tailored viewing experience for your users.

Building a Multilingual Blog Site with Next.js and @ttoss/react-i18n

Rayza Oliveira — Wed, 04 Oct 2023 17:32:08 +0000

Internationalization (i18n) is an essential part of building modern websites, especially for those aiming to reach a global audience. In this tutorial, we will explore how to create a multilingual blog site using Next.js and the @ttoss/i18n library. This combination will allow us to provide an engaging reading experience for users in different languages.

Two Facets of i18n in Next.js

Before we dive into the nitty-gritty, let's establish an essential distinction within Next.js's i18n capabilities:

1. Next.js-Integrated i18n for Routing

Why It Matters: This mode focuses on managing different language versions of your website at the routing level. It's invaluable when you need to handle multilingual content that goes beyond simple text changes. For instance, if you're running a Content Management System (CMS) and want to optimize for Search Engine Optimization (SEO) with language-specific metadata, this approach is your go-to.

What It Solves: This mode efficiently manages routes and server-side rendering for distinct locales. However, when it comes to straightforward text translation, it may fall short.

2. Component-Level i18n with @ttoss/react-i18n and @ttoss/i18n-cli

Why It Matters: Here, we move inside the components themselves, addressing the finer details of internationalization. This approach is perfect for scenarios where you need to translate simple text elements like buttons, labels, and headings, making your site more user-friendly.

What It Solves: The Component-Level i18n enables you to tackle those everyday translation needs. For example, switching "Submit" to "Submeter" in a form.

Prerequisites

Before we get started, make sure you have Node.js and npm (or yarn or pnpm) installed on your system.

Setting Up a Next.js Project

To create a new Next.js project, run the following command:

npx create-next-app my-blog
cd my-blog

Adding @ttoss/react-i18n

Let's integrate @ttoss/react-i18n into our project:

npm install @ttoss/react-i18n
# or
yarn add @ttoss/react-i18n
# or
pnpm install @ttoss/react-i18n

Routing with Next.js i18n

Let's first explore the robust routing capabilities that Next.js offers for internationalization. This method is indispensable when your website's multilingual needs extend to intricate content variations, such as managing a CMS or optimizing for SEO.

In this mode:

You can efficiently handle routes for different locales, ensuring that users are directed to the appropriate language versions of your pages.
Server-side rendering takes care of delivering pre-rendered pages, optimizing the performance and SEO of your site.
Metadata and SEO parameters can be tailored for each language, elevating your website's search engine visibility.

But here's the catch: while it excels at managing routes and complex content, this approach may not be the most efficient for handling straightforward text translation needs. For example, changing a simple button label from "Submit" to "Submeter" across the site may become cumbersome.

Component-Level i18n with @ttoss/react-i18n

Now, let's zoom in on the component-level internationalization. This aspect of i18n focuses on addressing those everyday translation requirements, allowing you to effortlessly switch text elements within your components.

Here's why this approach shines:

It enables you to handle simple text changes throughout your website with ease. For instance, translating buttons, labels, and headings is a breeze.
Users experience a more intuitive interface, as common text elements are seamlessly translated into their preferred language.

So, whether you're dealing with a call-to-action button or a form label, Component-Level i18n with @ttoss/react-i18n and @ttoss/i18n-cli has you covered.

Configuring Next.js

This configuration defines the available languages in your application and sets the default language to en-US. Now, Next.js will use this configuration to handle server-side internationalization.

// next.config.js

module.exports = {
  i18n: {
    locales: ['en-US', 'pt-BR'],
    defaultLocale: 'en-US',
    // This `localeDetection` property is optional.
    // When set to false, you can freely switch between locales.
    localeDetection: false,
  },
};

Configuring the `I18nProvider`

In your _app.js file inside the pages folder, import and configure the I18nProvider to provide internationalization support. The file should look like this:

pages/_app.ts:

import { I18nProvider, LoadLocaleData } from "@ttoss/react-i18n";
import { useRouter } from "next/router";

const loadLocaleData: LoadLocaleData = (locale) => {
  switch (locale) {
    case "pt-BR":
      return import("../../i18n/compiled/pt-BR.json");
    default:
      return import("../../i18n/compiled/en-US.json");
  }
};

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();
  return (
    <I18nProvider locale={locale} loadLocaleData={loadLocaleData}>
      <Component {...pageProps} />
    </I18nProvider>
  );
}

export default MyApp;

Creating Localized Components

Now, we can use the library to write text that will be extracted and translated later. For example, to create a blog post component:

import { useI18n } from '@ttoss/react-i18n';

function BlogPost() {
  const { intl } = useI18n();

  return (
    <div>
      <h2>
        {intl.formatMessage({
          description: 'My blog post title',
          defaultMessage: 'How to work with translation on nextjs projects',
        })}
      </h2>
      <p>
        {intl.formatMessage({
          description: 'My blog post content',
          defaultMessage: 'Here, you can type all content',
        })}
      </p>
    </div>
  );
}

export default BlogPost;

Switching Language

Now, we can add a language selector to our site, allowing users to choose their preferred language. If you have the localeDetection: true option in next.config.js, when switching the language, Next.js will automatically update the route, and the I18nProvider will take care of displaying the content in the correct language. If this property is set to false, you can do it as follows:

import { useI18n } from '@ttoss/react-i18n';
import { useRouter } from 'next/router';

function LanguageSelector() {
  const { intl, setLocale } = useI18n();
  const router = useRouter();

  const handleChangeLanguage = (locale: string) => {
    setLocale(locale);

    router.push(router.asPath, router.asPath, {
      locale,
      shallow: true,
    });
  };

  return (
    <div>
      <select onChange={(e) => handleChangeLanguage(e.target.value)}>
        <option value="en-US">English</option>
        <option value="pt-BR">Portuguese</option>
      </select>
    </div>
  );
}

export default LanguageSelector;

Extracting Texts and Compiling Translations

Add these script command to your project's package.json:

"scripts": {
  "i18n": "ttoss-i18n"
},

The last step is where the magic happens. First, you need to extract all the texts that have been added using intl from useI18n by running the pnpm run i18n command. Then, all the extracted texts will be added to the file i18n/lang/en.json.

Now you need to duplicate this file for the other languages and translate them. When you finish translating, run again the pnpm run i18n command to compile all the languages. This command will create a folder called compiled inside i18n folder with the translations that are gonna be used by @ttoss/react-i18n lib to show the correct language on screen.

Conclusion

In this journey through Next.js and @ttoss/react-i18n, we've explored the two facets of internationalization that can transform your website into a multilingual masterpiece.

Routing with Next.js i18n is your go-to when you need to manage complex content variations, optimize SEO, and handle metadata intricacies. It's a powerful choice for scenarios like CMS-driven websites.
Component-Level i18n steps in to effortlessly manage those everyday translation needs. It makes tasks like changing button labels, form fields, and headings in your components a breeze, enhancing your website's user-friendliness.

By understanding and implementing both aspects of i18n, you'll have the tools needed to create inclusive and impactful multilingual websites that cater to a global audience.

DEV Community: Rayza Oliveira

Props: Comunicação entre Componentes Pai e Filho no React

Storybook : Conceitos Fundamentais e Criação de Sua Primeira Story

Avoiding Re-render on Pagination with Relay

Introduction to Relay

What is Relay?

What is Relay Used For?

Pagination with Relay

Approach with useQueryLoader + usePreloadedQuery + useState

Why does this happen?

How to Optimize

Understanding usePaginationFragment

How usePaginationFragment Avoids Unnecessary Re-renders

Important to know before work with pagination using usePaginationFragment on relay

Practical Example

Conclusion

Embedding Videos in Markdown using React

Setup

Creating a Markdown Content Component

Customizing the Markdown Component

Obtaining the Embed Link from YouTube

Handling Video Links

Embedding the Video

Usage Example

Conclusion

Building a Multilingual Blog Site with Next.js and @ttoss/react-i18n

Two Facets of i18n in Next.js

1. Next.js-Integrated i18n for Routing

2. Component-Level i18n with @ttoss/react-i18n and @ttoss/i18n-cli

Prerequisites

Setting Up a Next.js Project

Adding @ttoss/react-i18n

Routing with Next.js i18n

Component-Level i18n with @ttoss/react-i18n

Configuring Next.js

Configuring the I18nProvider

Creating Localized Components

Switching Language

Extracting Texts and Compiling Translations

Conclusion

Approach with `useQueryLoader` + `usePreloadedQuery` + `useState`

Understanding `usePaginationFragment`

How `usePaginationFragment` Avoids Unnecessary Re-renders

Important to know before work with pagination using `usePaginationFragment` on relay

Configuring the `I18nProvider`