Índice  Introdução  Configurando o Projeto  Compreendendo a estrutura de pastas  Listando todas as postagens do blog  Apresentando uma única postagem de blog  Utilizando a interface do usuário de carregamento e streaming em Next.js  Conclusão  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   neste guia, fique à vontade para usar   ou   : yarn npm pnpm   yarn dev  Agora, visite   onde você encontrará a página de modelo Next.js padrão. http://localhost:3000  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   , configuraremos uma API fictícia para postagens de blog. Aqui,   especifica que gostaríamos de revalidar nossos dados a cada 60 segundos. /app/api/posts/route.js next: { revalidate: 60 }   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 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 baseada em tempo    : 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 sob demanda   Revalidação baseada em tempo  Para revalidar os dados em um intervalo de tempo, você pode usar a opção   de   para definir o tempo de vida do cache de um recurso (em segundos). next.revalidate fetch  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,   , que busca e exibe os posts do nosso servidor. Embora eu tenha estilizado minimamente, sinta-se à vontade para incrementá-lo! PostsPage   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   do Next.js: Link   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,   , usa a busca de dados do lado do cliente. SinglePost  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   no servidor e hidratados no cliente. Você pode pensar nos componentes do cliente como os componentes do   sempre funcionaram. pré-renderizados roteador de páginas   '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    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   . Dica: 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!

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Modelo Bitcoin UTXO, alimentando um ecossistema único

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Modelo Bitcoin UTXO, alimentando um ecossistema único

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps