Como construir um blog com Next e MDX

Next.js é uma estrutura React que permite que você crie aplicativos estáticos e dinâmicos rapidamente. Ele está pronto para produção e suporta renderização do lado do servidor e geração de sites estáticos prontos para uso, tornando os aplicativos Next.js rápidos e amigáveis ​​para SEO.

Neste tutorial, explicarei primeiro o que exatamente é Next.js e por que você o usaria em vez de Create React App ou Gatsby. Em seguida, mostrarei como criar um blog no qual você pode escrever e renderizar postagens usando Next.js e MDX.

Para começar, você precisará de alguma experiência com React. O conhecimento de Next.js seria útil, mas não é obrigatório. Este tutorial beneficiaria quem deseja criar um blog (pessoal ou organizacional) usando Next.js ou ainda está procurando o que usar.

Vamos mergulhar.

O que é Next.js?

Next.js é um framework React criado e mantido pela Vercel. Ele é construído com React, Node.js, Babel e Webpack. Está pronto para produção porque vem com muitos recursos excelentes que normalmente seriam configurados em um aplicativo React “baunilha”.

A estrutura Next.js pode renderizar aplicativos no servidor ou exportá-los estaticamente. Ele não espera que o navegador carregue o JavaScript para mostrar o conteúdo, o que torna os aplicativos Next.js amigáveis ​​para SEO e extremamente rápidos.

Por que usar Next.js em vez de criar aplicativo React?

Create React App é uma ferramenta útil que oferece uma configuração de compilação moderna sem configuração e sem o incômodo de ter que configurar Webpack, Babel e assim por diante ou ter que manter suas dependências. É a maneira recomendada de criar aplicativos React hoje em dia. Ele possui um modelo para TypeScript e também vem com a React Testing Library.

No entanto, se você quiser criar um aplicativo de várias páginas, precisará instalar uma biblioteca extra, como se estivesse renderizando um aplicativo React no servidor. A configuração extra pode ser um problema, e qualquer pacote instalado pode aumentar o tamanho do pacote final do seu aplicativo.

Este é exatamente o problema que o Next.js pretende resolver. Ele oferece a melhor experiência de desenvolvedor, com tudo o que você precisa para a produção. Ele vem com vários recursos interessantes:

• Exportação estática (pré-renderização)
  Next.js permite exportar seu aplicativo Next.js em tempo de compilação para HTML estático que é executado sem um servidor. É a maneira recomendada de gerar seu site porque é feito no momento da construção e não a cada solicitação.
• Renderização do lado do servidor (pré-renderização)
  Ele pré-renderiza as páginas para HTML no servidor a cada solicitação.
• Divisão automática de código
  Ao contrário do React, o Next.js divide o código automaticamente e carrega apenas o JavaScript necessário, o que torna o aplicativo rápido.
• Roteamento baseado em sistema de arquivos
  O Next.js usa o sistema de arquivos para habilitar o roteamento no aplicativo, o que significa que cada arquivo no diretório pages será tratado automaticamente como uma rota.
• Recarregamento a quente de código
  O Next.js conta com o React Fast Refresh para recarregar seu código a quente, oferecendo uma ótima experiência de desenvolvedor.
• Opções de estilo
  A estrutura Next.js tem suporte integrado para Styled JSX, módulos CSS, Sass, LESS e muito mais.

Next.js versus Gatsby

Gatsby é um gerador de site estático construído sobre React e GraphQL. É popular e possui um enorme ecossistema que fornece temas, plugins, receitas e assim por diante.

Os sites Gatsby e Next.js são super-rápidos porque ambos são renderizados no servidor ou estaticamente, o que significa que o código JavaScript não espera o carregamento do navegador. Vamos compará-los de acordo com a experiência do desenvolvedor.

Gatsby é fácil de começar, especialmente se você já conhece o React. No entanto, o Gatsby usa o GraphQL para consultar dados e páginas locais. Usar o Gatsby para construir este blog simples pode ser um exagero porque o GraphQL tem uma curva de aprendizado, e o tempo de consulta e construção de páginas estáticas seria um pouco mais longo. Se você criou esse mesmo blog duas vezes, primeiro com Gatsby e depois com Next.js, aquele criado com Next.js seria muito mais rápido no tempo de criação porque usa JavaScript normal para consultar dados e páginas locais.

Espero que você aproveite o poder do framework Next.js e veja por que ele é muito mais prático do que algumas alternativas. Também é uma ótima opção se o seu site depende muito de SEO, porque seu aplicativo será rápido e fácil para os robôs do Google rastrearem. Essa é a razão pela qual usaremos o Next.js neste artigo para criar um blog com a biblioteca MDX.

Vamos começar configurando um novo aplicativo Next.js.

Configurando

Há duas maneiras de criar um aplicativo Next.js. Podemos configurar um novo aplicativo manualmente ou usar Create Next App. Vamos para o último porque é a maneira recomendada e configurará tudo automaticamente para nós.

Para iniciar um novo aplicativo, execute o seguinte na interface de linha de comando (CLI):

 npx create-next-app

Depois que o projeto for inicializado, vamos estruturar o aplicativo Next.js da seguinte forma:

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

Como você pode ver, nosso projeto tem uma estrutura de arquivos simples. Há três coisas a serem observadas:

• _app.js nos permite anexar algum conteúdo ao componente App.js para torná-lo global.
• getAllPosts.js nos ajuda a recuperar as postagens do blog da pasta pages/blog . A propósito, você pode nomear o arquivo como quiser.
• next.config.js é o arquivo de configuração do nosso aplicativo Next.js.

Voltarei a cada arquivo mais tarde e explicarei o que ele faz. Por enquanto, vamos ver o pacote MDX.

Instalando a Biblioteca MDX

MDX é um formato que nos permite escrever perfeitamente JSX e importar componentes em nossos arquivos Markdown. Ele nos permite escrever Markdown regular e incorporar componentes React em nossos arquivos também.

Para habilitar o MDX no aplicativo, precisamos instalar a biblioteca @mdx-js/loader . Para fazer isso, vamos primeiro navegar até a raiz do projeto e, em seguida, executar este comando na CLI:

 yarn add @mdx-js/loader

Ou, se você estiver usando npm:

 npm install @mdx-js/loader

Em seguida, instale @next/mdx , que é uma biblioteca específica para Next.js. Execute este comando na CLI:

 yarn add @next/mdx

Ou, para npm:

 npm install @next/mdx

Excelente! Terminamos de configurar. Vamos sujar as mãos e codificar algo significativo.

Configurando o arquivo next.config.js

 const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

Anteriormente neste tutorial, eu disse que os arquivos na pasta pages seriam tratados como páginas/rotas pelo Next.js em tempo de compilação. Por padrão, o Next.js apenas selecionará arquivos com extensões .js ou .jsx . É por isso que precisamos de um arquivo de configuração, para adicionar algumas personalizações ao comportamento padrão do Next.js.

O arquivo next.config.js informa à estrutura que os arquivos com extensões .md ou .mdx também devem ser tratados como páginas/rotas em tempo de compilação porque a pasta do blog que contém os artigos está no diretório pages .

Dito isso, podemos começar a buscar as postagens do blog na próxima parte.

Buscando postagens do blog

Uma das razões pelas quais construir um blog com Next.js é fácil e simples é que você não precisa do GraphQL ou algo parecido para buscar posts locais. Você pode simplesmente usar JavaScript regular para obter os dados.

Em getAllPosts.js :

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

Este arquivo pode ser intimidante no início. É uma função que importa todos os arquivos MDX da pasta pages/blog , e para cada post retorna um objeto com o caminho do arquivo, sem a extensão ( /post-1 ), e os dados do post do blog.

Com isso, agora podemos construir os componentes para estilizar e mostrar dados em nosso aplicativo Next.js.

Construindo os componentes

Em components/Layout.js :

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

Aqui, temos o componente Layout , que usaremos como wrapper para o blog. Ele recebe os metadados para mostrar no cabeçalho da página e o componente a ser exibido.

Em components/Post.js :

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

Este componente é responsável por exibir uma prévia de uma postagem de blog. Ele recebe o objeto post para mostrar como adereços. Em seguida, usamos a desestruturação para extrair o link do post e o meta para mostrar do objeto. Com isso, agora podemos passar os dados para os componentes e tratar do roteamento com o componente Link .

Em components/BlogPost.js :

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

O componente BlogPost nos ajuda a renderizar um único artigo. Ele recebe o post a ser exibido e seu meta .

Até agora, cobrimos muito – mas não temos artigos para mostrar. Vamos corrigir isso na próxima seção.

Escrevendo posts com MDX

 import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

Como você pode ver, importamos o componente BlogPost , que recebe a meta e o corpo do post.

O parâmetro children é o corpo da postagem do blog ou, para ser mais preciso, tudo o que vem depois do meta . É a função responsável por renderizar o post.

Com essa alteração, podemos passar para o arquivo index.js e exibir as postagens na página inicial.

Exibindo postagens

 import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

Aqui, começamos importando o componente Post e os posts buscados na pasta do blog . Em seguida, percorremos a matriz de artigos e, para cada postagem, usamos o componente Post para exibi-la. Feito isso, agora podemos buscar as postagens e exibi-las na página.

Estamos quase terminando. No entanto, o componente Layout ainda não está sendo usado. Podemos usá-lo aqui e envolver nossos componentes com ele. Mas isso não afetará as páginas de artigos. É aí que entra o arquivo _app.js . Vamos usar isso na próxima seção.

Usando o arquivo _app.js

Aqui, o símbolo de sublinhado ( _ ) é realmente importante. Se você omitir, Next.js tratará o arquivo como uma página/rota.

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

Next.js usa o componente App para inicializar páginas. A finalidade deste arquivo é substituí-lo e adicionar alguns estilos globais ao projeto. Se você tiver estilos ou dados que precisam ser compartilhados no projeto, coloque-os aqui.

Agora podemos navegar na pasta do projeto na CLI e executar o seguinte comando para visualizar o blog no navegador:

 yarn dev

Ou, em npm:

 npm run dev

Se você abrir https://localhost:3000 no navegador, poderá ver isto:

Excelente! Nosso blog parece bom. Concluímos a criação do aplicativo de blog com Next.js e MDX.

Conclusão

Neste tutorial, percorremos o Next.js criando um blog usando a biblioteca MDX. A estrutura Next.js é uma ferramenta útil que torna os aplicativos React amigáveis ​​para SEO e rápidos. Ele pode ser usado para construir sites JAMstack estáticos e dinâmicos rapidamente, porque está pronto para produção e vem com alguns recursos interessantes. O Next.js é amplamente utilizado por grandes empresas e seu desempenho continua melhorando. É definitivamente algo para verificar para o seu próximo projeto.

Você pode visualizar o projeto finalizado no CodeSandbox.

Obrigado por ler!

Recursos

Esses recursos úteis levarão você além do escopo deste tutorial.

• Documentação do Next.js
• Documentação do Next.js e MDX
• “Criar um aplicativo Next.js”, Next.js