Um guia passo a passo para criar um blog Next.js 13 simples

Índice

1. Introdução
2. Configurando o Projeto
3. Compreendendo a estrutura de pastas
4. Listando todas as postagens do blog
5. Apresentando uma única postagem de blog
6. Utilizando a interface do usuário de carregamento e streaming em Next.js
7. Conclusão
8. Referências

1. Introdução

Olá!

No tutorial de hoje, estamos embarcando em uma jornada para criar um blog simples, porém poderoso, usando o Next.js.

Se você é novo no Next.js ou está apenas procurando aprimorar alguns fundamentos, este guia foi feito sob medida para você.

Não apenas lidaremos com como configurar um projeto, mas também abordaremos estruturas de pastas, renderização do lado do servidor e muito mais.

Você pode encontrar o repositório completo aqui

Vamos mergulhar de cabeça!

2. Configurando o Projeto

Etapa 1: criar o aplicativo

Para começar, vamos usar o seguinte comando para configurar nosso aplicativo Next.js:

 npx create-next-app@latest blog-example

Depois de concluído, navegue até o projeto recém-criado:

 cd blog-example

Etapa 2: Iniciar o servidor de desenvolvimento

Embora eu esteja usando yarn neste guia, fique à vontade para usar npm ou pnpm :

 yarn dev

Agora, visite http://localhost:3000 onde você encontrará a página de modelo Next.js padrão.

3. Compreendendo a estrutura de pastas

Neste ponto, é bom entender a estrutura de nosso aplicativo Next.js. Consulte a imagem a seguir para obter uma representação visual do layout da pasta.

4. Listando todas as postagens do blog

4.1. Rota da API

Dentro de /app/api/posts/route.js , configuraremos uma API fictícia para postagens de blog. Aqui, next: { revalidate: 60 } especifica que gostaríamos de revalidar nossos dados a cada 60 segundos.

Revalidando Dados

A revalidação é o processo de limpar o cache de dados e buscar novamente os dados mais recentes. Isso é útil quando seus dados mudam e você deseja garantir a exibição das informações mais recentes.

Os dados armazenados em cache podem ser revalidados de duas maneiras:

• Revalidação baseada em tempo : revalida automaticamente os dados após um determinado período de tempo. Isso é útil para dados que mudam com pouca frequência e a atualização não é tão crítica.
• Revalidação sob demanda : Revalida manualmente os dados com base em um evento (por exemplo, envio de formulário). A revalidação sob demanda pode usar uma abordagem baseada em tag ou em caminho para revalidar grupos de dados de uma só vez. Isso é útil quando você deseja garantir que os dados mais recentes sejam exibidos o mais rápido possível (por exemplo, quando o conteúdo do seu CMS headless é atualizado).

Revalidação baseada em tempo

Para revalidar os dados em um intervalo de tempo, você pode usar a opção next.revalidate de fetch para definir o tempo de vida do cache de um recurso (em segundos).

Aqui está um exemplo:

 import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }

4.2. Exibindo as postagens

Vamos criar um componente, PostsPage , que busca e exibe os posts do nosso servidor. Embora eu tenha estilizado minimamente, sinta-se à vontade para incrementá-lo!

 export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

Até agora, você deve estar vendo uma lista de artigos.

5. Apresentando uma única postagem de blog

5.1. Vinculando a postagem

Para tornar cada título de postagem clicável, adicionaremos o componente Link do Next.js:

 import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

5.2. Rota de API para uma única postagem

Na rota da API Next.js, estamos buscando postagens específicas com base em seu ID:

 import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }

5.3. Exibindo uma única postagem

Para exibir postagens individuais, é vital entender a diferença entre componentes de servidor e cliente em Next.js.

O componente fornecido, SinglePost , usa a busca de dados do lado do cliente.

Essencialmente, isso significa que os dados são buscados no cliente após a renderização da página. Ele permite uma rica interatividade sem sacrificar o desempenho. Mais sobre isso pode ser lido na documentação do Next.js no React Essentials .

Componentes do Cliente

Os componentes do cliente permitem que você adicione interatividade do lado do cliente ao seu aplicativo. No Next.js, eles são pré-renderizados no servidor e hidratados no cliente. Você pode pensar nos componentes do cliente como os componentes do roteador de páginas sempre funcionaram.

 'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) }

Agora, você deve conseguir ver os detalhes do artigo. Por favor, desculpe a falta de estilo!

6. Utilizando a interface do usuário de carregamento e streaming em Next.js

Dica: para melhorar a experiência do usuário, considere adicionar um componente de carregamento. O Next.js fornece uma solução integrada com a interface do usuário de carregamento e streaming. Ele ajuda a mostrar um botão giratório de carregamento até que seu conteúdo esteja pronto. Mergulhe mais fundo com este guia oficial sobre Loading UI and Streaming .

Por exemplo:

 // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}

7. Conclusão

Construir um aplicativo Next.js pode ser divertido e esclarecedor.

Aprendemos a configurar um projeto, gerenciar nossa estrutura de pastas, listar postagens de blog, exibir postagens individuais e até tocar nos estados de carregamento.

Com o rápido crescimento do Next.js na comunidade de desenvolvimento web, as habilidades aprendidas aqui são inestimáveis.

Expanda essa base, explore mais recursos e boa programação!

8. Referências

Documentação oficial do Next.js

Para os dados do artigo, usei DummyJson

Para construir o artigo, usei o StackEdit

Obrigado pelo seu tempo e dedicação ao aprendizado. Seu feedback é imensamente valioso. Se você tiver quaisquer acréscimos ou correções a esta postagem, entre em contato.

Conecte-se comigo em: comunidade dev.to @leandro_nnz

comunidade hackernoon.com @leandronnz

Twitter @digpollution

Saúde!