DEV Community: Adriel

Como customizar o preview de links em redes sociais no Next.js

Adriel — Wed, 20 Mar 2024 19:36:19 +0000

Se você já compartilhou um link no WhatsApp ou alguma rede social como Facebook ou LinkedIn, você deve ter notado que um preview da página em questão quase sempre aparece. Nesse artigo vamos ver como você pode customizar as informações que aparecem nesses previews.

Tudo se resume a metadados

Varia um pouco de rede social para rede social, mas todas as informações que compõem essas prévias, desde o texto até a imagem de destaque, são obtidas a partir de tags <meta> definidas nas páginas.

Facebook, WhatsApp e outras redes sociais usam meta tags conforme definidas pelo Open Graph Protocol, enquanto o Twitter usa algumas tags próprias além das definidas por essa convenção.

Há algumas tags específicas/exclusivas para páginas referentes a tipos de mídia específicos, como vídeos ou músicas, porém nesse tutorial iremos focar em uma página web genérica.

Aplicando em qualquer lugar

Independente de framework ou plataforma, há 4 tags que são obrigatórias para todos os casos, independente do tipo de mídia:

og:title: O título que você quer dar a sua página, vamos considerar para o exemplo desse artigo o valor "Minha página"
og:type: O tipo de mídia da sua página, aqui vamos utilizar o tipo "website", mas também existem os tipos "article", "blog", "music.song" e muitos outros.
og:image: Uma imagem para representar a sua página
og:url: A URL para a sua página

Para aplicar essas propriedades em um arquivo html comum, as tags <head></head> deveriam ter um conteúdo nesse formato:

<meta name="og:title" content="Minha página" />
<meta name="og:type" content="website" />
<meta name="og:image" content="https://cdn.pixabay.com/photo/2023/03/20/20/35/sunset-7865844_1280.jpg" />
<meta name="og:url" content="https://seu-site.com" />

Além dessas tags obrigatórias, é interessante também aplicar as seguintes:

og:image:width: A largura da imagem usada na meta tag og:image
og:image:height: A altura da imagem usada na meta tag og:image
og:description: Uma breve descrição da sua página

Para o twitter as tags usadas são as seguintes:

twitter:card: Define o tamanho do card a ser usado na pré-visualização do link. Aqui vamos usar o valor summary_large_image, mas ele também suporta os valores summary, app e player
twitter:author: Nome de usuário do autor do conteúdo da página
twitter:description: Basicamente o mesmo que og:description
twitter:image: Basicamente o mesmo que og:image
twitter:title: Basicamente o mesmo que og:title

Aplicando com o NextJS

No NextJS, ao invés de declarar essas meta tags diretamente no arquivo html, usamos o objeto metadata, ou a função generateMetadata, para definir as tags.

A seguir está um exemplo usando a função generateMetadata para carregar dados a partir de uma consulta ao banco de dados:

export async function generateMetadata({ params }) {
  const project = await database.getProject(params.id);

  const basicMetadata = {
    title: 'Projeto - Minha página',
    description: 'Conheça mais do meu projeto',
  }

  if (project) {
    const title = project.name;
    const description = project.description;

    return {
      title,
      description,
      metadataBase: new URL('https://seu-site.com/' + project.id),
      twitter: {
        card: 'summary_large_image',
        creator: '@seuUsuarioNoTwitter',
        title,
        description,
        images: [project.image],
      },
      openGraph: {
        title,
        description,
        siteName: 'Minha página',
        type: 'website',
        images: [
          {
            url: project.image,
            width: 1280,
            height: 720,
          },
        ],
      },
    };
  }
  return basicMetadata;
}

E é isso, só com essas tags você já consegue deixar seus previews com uma cara bem legal.

Links úteis

Abaixo eu deixo alguns links que podem ser úteis caso você queira fazer algo mais detalhado/específico.

Documentação do Open Graph Protocol

Documentação do NextJS sobre utilização do Open Graph Protocol

Ferramenta de preview de apresentação de links no Facebook e Twitter

Mais informações sobre as tags usadas pelo twitter

Menu de navegação responsivo e animado usando só HTML, CSS e um pouquinho de Javascript

Adriel — Wed, 13 Mar 2024 14:09:45 +0000

O título é bem auto descritivo, então vamos direto ao ponto. Para começar, esse é o nosso HTML, nada muito diferente do que você vê no dia a dia.

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menu de navegação</title>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Meu site</h1>
      <button class="btn-hamburger" type="button" title="Fechar">
        <i></i>
        <i></i>
        <i></i>
      </button>
      <nav>
        <ul>
          <li class="close-button">
            <button class="btn-hamburger" type="button" title="Fechar">
              <i></i>
              <i></i>
              <i></i>
            </button>
          </li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Contato</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

No head temos apenas algumas tags definindo o titulo da página e linkando os nossos futuros arquivos style.css e script.js.

Já no body nós temos um header que contem o título do site, o nosso botão de menu, e uma tag nav que vai ser nossa navbar. As tags <i></i> dentro do botão de menu serão as responsáveis por formar os ícones de menu hambúrguer e de X no nosso botão, mas não vamos nos adiantar, já já falamos disso.

Dentro da nossa tag nav nós temos uma lista com os links de navegação para as outras páginas, e você deve ter reparado que o primeiro item da lista tem a mesma estrutura do botão de menu do header.

Não é erro de digitação, estamos repetindo ele dentro da navbar para que possamos fechar o menu quando ele estiver aberto, já que a ideia é que o menu sobreponha toda a página em telas pequenas, o que impede a gente de clicar naquele nosso botão do header para acionar o fechamento.

CSS

Passando para o CSS, vamos em partes, primeiro vamos definir algumas variáveis para deixar a nossa vida mais simples no futuro e dar um reset simples na página para não haver discrepância entre os navegadores:

/* style.css */
:root {
  --bg: #222823; /* Cor de fundo do menu */
  --fg: #575a5e; /* Cor de destaque */
  --hamburger-btn-padding: 8px; /* Padding do botão de menu */
  --hamburger-btn-size: 32px; /* Tamanho do botão de menu */
  --hamburger-btn-gap: 4px; /* Espaçamento das linhas do botão de menu */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

Em seguida vamos customizar os botões da nossa página, apenas para deixar eles mais agradáveis:

/* style.css */
button {
  border-radius: 4px;
  border: none;
  background-color: var(--bg);
  transition: filter 300ms ease-out;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.2);
}

Agora vamos estilizar nosso header, para que possamos diferenciá-lo do resto da página:

/* style.css */
header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--bg);
  color: #fff;
  align-items: center;
}

Aqui eu estou aplicando o display: flex; com justify-content: space-between; para fazer com que o título fique do lado esquerdo e o botão de menu/navbar vá para o lado direito da tela.

No mais eu estou apenas aplicando um padding para dar um espaço entre as bordas e um align-items: center para deixar a o título e o botão/navbar alinhados.

Como eu estou usando uma cor de fundo escura, estou deixando a cor do texto branca para conseguir ler, caso você tenha usado uma cor clara para o fundo e esteja ruim de ler, basta alterar essa linha para melhorar a visibilidade do texto.

Agora vamos passar para o botão do menu.

/* style.css */
.btn-hamburger {
  width: var(--hamburger-btn-size);
  height: var(--hamburger-btn-size);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hamburger-btn-gap);
  flex-direction: column;
}

A classe btn-hamgurger vai ser a responsável por identificar e estilizar os nossos botões de menu na página.

As customizações aqui consistem basicamente na definição da largura e da altura do botão. Além da definição da posição como relative que nos vai ser útil na hora de animar o ícone do botão.

As demais mudanças servem apenas para manter as três tags <i></i> centralizadas no botão e espaçadas igualmente umas das outras.

Agora é importante mencionar que o que irá definir se o menu está aberto ou não é a presença da classe active. No botão essa classe será a responsável por estilizar as três tags i como um X ao invés de um hambúrguer. Já na nav ela será a responsável por mostrar o menu em aparelhos com telas pequenas.

Estilizamos as tags i assim para que elas fiquem parecendo com as barras de um botão de menu:

/* style.css */

.btn-hamburger i {
  height: 2px;
  width: calc(var(--hamburger-btn-size) - 2 * var(--hamburger-btn-padding));
  background-color: var(--fg);
  border-radius: 4px;
  transition: transform 150ms ease-in-out;
}

.btn-hamburger.active i {
  position: absolute;
}

.btn-hamburger.active i {
  transform: rotate(45deg);
}

.btn-hamburger.active i:nth-of-type(2) {
  transform: rotate(-45deg);
}

O primeiro bloco de código apenas define a altura de cada barra e realiza um cálculo simples para definir a largura da barra como sendo a largura total do botão menos o padding aplicado. O transitionestá ali apenas para que a mudança de ícone ocorra de forma gradual como uma animação, ao invés de instantânea.

O segundo bloco de código muda o position dessas tags para absolute a fim de que elas consigam sobrepor umas as outras para formar o ícone de X.

Para transformar as três barras em um X, precisamos apenas rotacionar duas delas em 45 graus, e a outra em -45 graus, que é o que estamos fazendo no terceiro e quarto blocos de código.

Já para a navbar aplicaremos essas propriedades:

/* style.css */
nav {
  width: 100vw;
  min-height: 100dvh;
  background-color: var(--bg);
  position: absolute;
  top: 0;
  left: 100vw;
  padding: 16px;
  transition: left 150ms ease-out;
}

nav.active {
  left: 0;
}

nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 4px;
}

nav li.close-button {
  align-self: flex-end;
}

nav a {
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 300ms ease-in-out;
}

nav a:hover {
  background: var(--fg);
}

Aqui vamos focar no primeiro e segundo blocos de código, já que os demais são apenas estilização.

nav {
  width: 100vw;
  min-height: 100dvh;
  background-color: var(--bg);
  position: absolute;
  top: 0;
  left: 100vw;
  padding: 16px;
  transition: left 150ms ease-out;
}

nav.active {
  left: 0;
}

Nesse primeiro bloco estamos fazendo a navbar ocupar um espaço correspondente a tela toda e então estamos usando as propriedades de posicionamento (position, left e top) para fazer com que ela se desloque totalmente para a direita e saia da tela, a deixando fora de vista, já que a ausência da classe active indica que ela deve estar fechada.

Por outro lado, quando a classe está presente devemos conseguir ver a navbar, pois ela estaria aberta. Nesse caso a gente define left: 0; para fazer com que ela inicie do canto esquerdo da tela ao invés do direito e fique visível na tela.

Se você testar agora, vai que a animação até está funcionando, mas há dois problemas:

A navbar continua visível, estando apenas fastada para o lado criando uma rolagem horizontal tenebrosa na página toda
Não há responsividade: em telas grandes ela continua aparecendo como um menu lateral ao invés de uma navbar.

Então vamos resolver essas questões.

A primeira é bem simples, basta que mandemos o css esconder tudo que está para fora do body horiozntalmente:

/* style.css */
body {
  font-family: sans-serif;
  overflow-x: hidden; /* Adicione essa linha */
}

Para o segundo problema uma media query é suficiente para resolver:

/* style.css */
@media screen and (min-width: 768px) {
  .btn-hamburger {
    display: none;
  }

  nav {
    position: initial;
    min-height: auto;
    width: auto;
    background: none;
    padding: 0;
  }

  nav ul {
    flex-direction: row;
  }
}

Nesses blocos de código estamos fazendo o seguinte:

Escondendo os botões de menu em telas grandes
Removendo a estilização que faz com que a navbar ocupe toda a tela e seja deslocada para fora da visão
Alterando a distribuições dos links de vertical para horizontal

Javascript

Por fim, agora temos que fazer os botões de menu provocarem as alterações de classe para que possamos abrir e fechar o menu:

// script.js

const hamburgerButtons = document.querySelectorAll('.btn-hamburger');
const navbar = document.querySelector('nav');

function menuToggle() {
  hamburgerButtons.forEach((button) => button.classList.toggle('active'));
  navbar.classList.toggle('active');
}

hamburgerButtons.forEach((button) => {
  button.addEventListener('click', menuToggle);
});

Resultado

Se você seguiu tudo até aqui sem se perder, você deve ter algo mais ou menos assim nas suas telas grandes:

E algo assim nas suas telas pequenas:

E é isso, espero que tenha gostado! 😉

Criando um site com múltiplos idiomas usando Next.js e next-intl

Adriel — Wed, 08 Nov 2023 16:16:48 +0000

Recentemente eu comecei a fazer com que a minha página de portfólio exibisse o seu conteúdo tanto em português como em inglês, para tentar deixar ela mais acessível.

Eu uso next.js nela e nesse processo eu acabei optando por utilizar a biblioteca next-intl, que apesar de muito prática tem toda sua documentação em inglês, então eu resolvi escrever esse artigo para ajudar quem está atrás de fazer algo parecido. Vamos ao tutorial.

Criando o app next

Para começar eu vou criar uma nova aplicação next.js usando o comando a seguir, caso você já tenha sua página criada, pode pular para o próximo passo.



npx create-next-app@latest

Eu estou utilizando typescript nesse projeto de exemplo, mas o funcionamento é o mesmo se você estiver usando javascript, basta ignorar as tipagens que vão aparecer nos códigos ao longo do artigo.

Instalando e configurando o next-intl

Com o projeto criado, vamos agora instalar o next usando o comando a seguir:



npm i next-intl

Em seguida precisamos fazer algumas modificações na nossa estrutura de arquivos:

Criar uma pasta messages dentro da nossa pasta src, é lá onde ficarão os diferentes arquivos de idioma da nossa página. Dentro dela criaremos dois arquivos: pt.json e en.json. O nome de cada arquivo tem que se referir aos idiomas que você pretende aplicar ao seu site.
Criar um arquivo middleware.ts, também na pasta src. Esse arquivo será o responsável por redirecionar as requisições do usuário para o locale correto.
Criar uma pasta [locale] dentro da pasta app e mover os arquivos .tsx para dentro dessa nova pasta. Isso permitirá que o arquivo layout.tsx tenha acesso ao locale preferido pelo usuário através das props e possa repassar essa informação para as páginas do app. Lembre-se de atualizar os imports desses arquivos.

Seu projeto deve estar com uma estrutura de pastas parecida com essa:

Para esse exemplo iremos utilizar os idiomas português e inglês, com o inglês como padrão. No arquivo middleware.ts, cole o código a seguir:



import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // Lista de locales suportados pela sua página
  locales: ['en', 'pt'],

  // Locale padrão
  defaultLocale: 'en'
});

export const config = {
  // Ignora as rotas que não devem ser internacionalizadas,
  // como rotas para arquivos de imagem
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
};

Substitua o código do arquivo layout.tsx pelo seguinte:



import { NextIntlClientProvider } from 'next-intl';
import { Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { ReactNode } from 'react';
import '../globals.css';

const inter = Inter({ subsets: ['latin'] });

export function generateStaticParams() {
  return [{ locale: 'en' }, { locale: 'pt' }];
}

interface Props {
  children: ReactNode;
  params: {
    locale: string;
  };
}

export default async function LocaleLayout({
  children,
  params: { locale },
}: Props) {
  let messages;
  try {
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body className={inter.className}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

O que estamos fazendo nesse arquivo é pegar via props o locale em que as páginas devem ser exibidas e importando o arquivo json correspondente com as traduções. Essas informações são então passadas para o <NextIntlClientProvider /> que disponibiliza essas traduções para as componentes filhos conforme é solicitado por cada um.

Agora iremos preencher os arquivos .json com as traduções da nossa página. As traduções desses arquivos podem ser organizadas da forma como você preferir, você só deve prestar atenção para que todos os arquivos tenham a mesma estrutura e as mesmas chaves, de forma que o que a única diferença do arquivo pt.json para o en.json, por exemplo, sejam os valores de cada chave.

pt.json: ```json

{
"home": {
"meta": {
"title": "Create Next App",
"description": "Gerado pelo create next app"
},
"page": {
"get-started": "Comece editando o arquivo",
"by": "Por",
"docs": {
"title": "Docs",
"content": "Encontre informações detalhadas sobre os recursos e a API do Next.js."
},
"learn": {
"title": "Aprenda",
"content": "Aprenda sobre o Next.js em um curso interativo com questionários!"
},
"templates": {
"title": "Templates",
"content": "Explore o playground do Next.js."
},
"deploy": {
"title": "Deploy",
"content": "Faça deploy instantaneamente de seu site Next.js em uma URL compartilhável com a Vercel."
}
}
}
}


- en.json:
```json


{
  "home": {
    "meta": {
      "title": "Create Next App",
      "description": "Generated by create next app"
    },
    "page": {
      "get-started": "Get started by editing",
      "by": "By",
      "docs": {
        "title": "Docs",
        "content": "Find in-depth information about Next.js features and API."
      },
      "learn": {
        "title": "Learn",
        "content": "Learn about Next.js in an interactive course with quizzes!"
      },
      "templates": {
        "title": "Templates",
        "content": "Explore the Next.js playground."
      },
      "deploy": {
        "title": "Deploy",
        "content": "Instantly deploy yout Next.js site to a shareable URL with Vercel."
      }
    }
  }
}

Traduzindo nossa página

No momento eu que eu estou escrevendo esse artigo, o next-intl funciona apenas com componentes do lado do cliente. Então para usar nossas traduções temos que adicionar o 'use client' no topo do nosso arquivo page.tsx.

Feito isso, precisamos agora apenas utilizar o hook useTranslations, exportado pelo next-intl, passando como parâmetro as chaves correspondentes a parte do nosso arquivo json que queremos acessar, nesse caso o conteúdo está em 'home.page'.



'use client';

import Image from 'next/image';
import styles from '../page.module.css';
import { useTranslations } from 'next-intl';

export default function Home() {
  const t = useTranslations('home.page');

  // resto do arquivo

Agora só precisamos colocar cada valor do nosso json no local correto da página usando a função t que recebemos do hook no passo anterior.

O título da seção de documentação, por exemplo, sairia disso:



<h2>Docs <span>-&gt;</span></h2>

Para isso:



<h2>{t('docs.title')} <span>-&gt;</span></h2>

Aplicando isso para todos os trechos da página com texto, ficariamos com esse arquivo page.tsx no final:



'use client';

import { useTranslations } from 'next-intl';
import Image from 'next/image';
import styles from '../page.module.css';

export default function Home() {
  const t = useTranslations('home.page');

  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          {t('get-started')}&nbsp;
          <code className={styles.code}>src/app/[locale]/page.tsx</code>
        </p>
        <div>
          <a
            href='https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
            target='_blank'
            rel='noopener noreferrer'
          >
            {t('by') + ' '}
            <Image
              src='/vercel.svg'
              alt='Vercel Logo'
              className={styles.vercelLogo}
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div className={styles.center}>
        <Image
          className={styles.logo}
          src='/next.svg'
          alt='Next.js Logo'
          width={180}
          height={37}
          priority
        />
      </div>

      <div className={styles.grid}>
        <a
          href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
          className={styles.card}
          target='_blank'
          rel='noopener noreferrer'
        >
          <h2>
            {t('docs.title')} <span>-&gt;</span>
          </h2>
          <p>{t('docs.content')}</p>
        </a>

        <a
          href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
          className={styles.card}
          target='_blank'
          rel='noopener noreferrer'
        >
          <h2>
            {t('learn.title')}
            <span>-&gt;</span>
          </h2>
          <p>{t('learn.content')}</p>
        </a>

        <a
          href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
          className={styles.card}
          target='_blank'
          rel='noopener noreferrer'
        >
          <h2>
            {t('templates.title')} <span>-&gt;</span>
          </h2>
          <p>{t('templates.content')}</p>
        </a>

        <a
          href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
          className={styles.card}
          target='_blank'
          rel='noopener noreferrer'
        >
          <h2>
            {t('deploy.title')} <span>-&gt;</span>
          </h2>
          <p>{t('deploy.content')}</p>
        </a>
      </div>
    </main>
  );
}

Pronto! Com apenas isso sua página passa a exibir o conteúdo de acordo com a preferência de idioma de cada usuário.

Mas e o metadata?

Se você está exportando metadados personalizados para sua página, usar useTranslations não será diretamente no arquivo page.tsx não será possível, pois enquanto o hook exige que o componente esteja do lado do cliente, para o metadata funcionar o componente deve estar do lado do servidor.

Felizmente você não precisa abrir mão dos seus metadados ou da tradução para múltiplos idiomas, para os dois funcionarem basta que você mova as partes que usam o useTranslations para um outro componente.

Assim, esse novo componente fica do lado do cliente, usando o useTranslations enquanto o page.tsx fica do lado do servidor com o metadata, apenas importando e exibindo o componente recém-criado.

Para o nosso exemplo, eis o que faremos:

Criar um componente Description, que será a parte superior da página;
Criar um componente LinkCard, que será usado para cada um dos cards da seção inferior da página;
Criar os componentes DocsCard, LearnCard, TemplatesCard e DeployCard que usarão o LinkCard para renderizar o conteúdo de cada card da seção inferior;
Atualizar nosso arquivo page.tsx removendo o 'use client' e substituindo o conteúdo html pelos componentes que criamos.

src/components/Description.tsx:



'use client';

import styles from '@/app/page.module.css';
import { useTranslations } from 'next-intl';
import Image from 'next/image';

export default function Description() {
  const t = useTranslations('home.page');

  return (
    <div className={styles.description}>
      <p>
        {t('get-started')}&nbsp;
        <code className={styles.code}>src/app/[locale]/page.tsx</code>
      </p>
      <div>
        <a
          href='https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
          target='_blank'
          rel='noopener noreferrer'
        >
          {t('by') + ' '}
          <Image
            src='/vercel.svg'
            alt='Vercel Logo'
            className={styles.vercelLogo}
            width={100}
            height={24}
            priority
          />
        </a>
      </div>
    </div>
  );
}

src/components/LinkCard.tsx:



import styles from '@/app/page.module.css';

interface Props {
  link: string;
  title: string;
  content: string;
}

export default function LinkCard({ content, link, title }: Props) {
  return (
    <a
      href={link}
      className={styles.card}
      target='_blank'
      rel='noopener noreferrer'
    >
      <h2>
        {title}
        <span>-&gt;</span>
      </h2>
      <p>{content}</p>
    </a>
  );
}

src/components/DocsCard.tsx:



'use client';

import { useTranslations } from 'next-intl';
import LinkCard from './LinkCard';

export default function DocsCard() {
  const t = useTranslations('home.page');

  return (
    <LinkCard
      content={t('docs.content')}
      link='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
      title={t('docs.title')}
    />
  );
}

src/components/LearnCard.tsx:



'use client';

import { useTranslations } from 'next-intl';
import LinkCard from './LinkCard';

export default function LearnCard() {
  const t = useTranslations('home.page');

  return (
    <LinkCard
      content={t('learn.content')}
      link='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
      title={t('learn.title')}
    />
  );
}

src/components/TemplatesCard.tsx:



'use client';

import { useTranslations } from 'next-intl';
import LinkCard from './LinkCard';

export default function TemplatesCard() {
  const t = useTranslations('home.page');

  return (
    <LinkCard
      content={t('docs.content')}
      link='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
      title={t('docs.title')}
    />
  );
}

src/components/DeployCard.tsx:



'use client';

import { useTranslations } from 'next-intl';
import LinkCard from './LinkCard';

export default function DeployCard() {
  const t = useTranslations('home.page');

  return (
    <LinkCard
      content={t('deploy.content')}
      link='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
      title={t('deploy.title')}
    />
  );
}

src/app/[locale]/page.tsx:



import DeployCard from '@/components/DeployCard';
import Description from '@/components/Description';
import DocsCard from '@/components/DocsCard';
import LearnCard from '@/components/LearnCard';
import TemplatesCard from '@/components/TemplatesCard';
import Image from 'next/image';
import styles from '../page.module.css';

export default function Home() {
  return (
    <main className={styles.main}>
      <Description />

      <div className={styles.center}>
        <Image
          className={styles.logo}
          src='/next.svg'
          alt='Next.js Logo'
          width={180}
          height={37}
          priority
        />
      </div>

      <div className={styles.grid}>
        <DocsCard />
        <LearnCard />
        <TemplatesCard />
        <DeployCard />
      </div>
    </main>
  );
}

Agora que temos o componente da página do lado do servidor, podemos exportar os metadados da página usando uma variável ou a função generateMetadata.

Nesse caso, como eu quero gerar títulos e descrições específicos para cada idioma, vamos utilizar a segunda opção, porque assim conseguimos pegar o idioma preferido do usuário pelos parâmetros da função e importar os metadados correspondentes.

src/app/[locale]/page.tsx:



// imports

import { Metadata } from 'next';

interface MetadataProps {

  params: { locale: string };

  searchParams: {};

}

export async function generateMetadata({

  params,

}: MetadataProps): Promise<Metadata> {

  const messages = (await import(@/messages/</span><span class="p">${</span><span class="nx">params</span><span class="p">.</span><span class="nx">locale</span><span class="p">}</span><span class="s2">.json)).default;

  return messages.home.meta;

}

// resto do arquivo

Resultado

E pronto, agora temos uma página com conteúdo em mais de um idioma:

Caso queira consultar posteriormente, esse é o repositório com o código desenvolvido ao longo do artigo.

Fontes

Documentação do Next.js sobre Metadata
Documentação do next-intl