Tabla de contenido  Introducción  Configuración del proyecto  Comprender la estructura de carpetas  Listado de todas las publicaciones de blog  Mostrar una sola publicación de blog  Uso de la interfaz de usuario de carga y transmisión en Next.js  Conclusión  Referencias  1. Introducción  ¡Hola!  En el tutorial de hoy, nos embarcamos en un viaje para crear un blog simple pero poderoso usando Next.js.  Ya sea que sea nuevo en Next.js o simplemente esté buscando repasar algunos conceptos básicos, esta guía está diseñada para usted.  No solo nos ocuparemos de cómo configurar un proyecto, sino que también abordaremos las estructuras de carpetas, la representación del lado del servidor y más.  Puedes encontrar el repositorio completo  aquí  ¡Vamos a sumergirnos!  2. Configuración del proyecto  Paso 1: Crea la aplicación  Para comenzar, usemos el siguiente comando para configurar nuestra aplicación Next.js:   npx create-next-app@latest blog-example  Una vez hecho esto, navegue hasta el proyecto recién creado:   cd blog-example  Paso 2: Inicie el servidor de desarrollo  Aunque estoy usando   en esta guía, siéntete libre de usar   o   : yarn npm pnpm   yarn dev  Ahora, visite   donde encontrará la página de plantilla predeterminada de Next.js. http://localhost:3000  3. Comprender la estructura de carpetas  En este punto, es útil comprender la estructura de nuestra aplicación Next.js. Consulte la siguiente imagen para ver una representación visual del diseño de la carpeta.   4. Listado de todas las publicaciones de blog  4.1. Ruta API  Dentro de   , configuraremos una API ficticia para publicaciones de blog. Aquí,   especifica que nos gustaría revalidar nuestros datos cada 60 segundos. /app/api/posts/route.js next: { revalidate: 60 }   Revalidación de datos  La revalidación es el proceso de purgar la memoria caché de datos y volver a obtener los datos más recientes. Esto es útil cuando sus datos cambian y desea asegurarse de mostrar la información más reciente.  Los datos almacenados en caché se pueden revalidar de dos maneras:    : revalida automáticamente los datos después de que haya pasado una cierta cantidad de tiempo. Esto es útil para los datos que cambian con poca frecuencia y la actualización no es tan crítica. Revalidación basada en el tiempo    : revalida manualmente los datos en función de un evento (por ejemplo, envío de formulario). La revalidación a pedido puede utilizar un enfoque basado en etiquetas o en rutas para revalidar grupos de datos a la vez. Esto es útil cuando desea asegurarse de que se muestren los datos más recientes lo antes posible (por ejemplo, cuando se actualiza el contenido de su CMS sin cabeza). Revalidación a pedido   Revalidación basada en tiempo  Para revalidar datos en un intervalo de tiempo, puede usar la opción   de   para establecer la duración de la memoria caché de un recurso (en segundos). next.revalidate fetch  Aquí hay un ejemplo:   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. Visualización de las publicaciones  Vamos a crear un componente,   , que obtenga y muestre publicaciones de nuestro servidor. Aunque lo he diseñado mínimamente, ¡siéntete libre de animarlo! 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> ); }  Hasta ahora, debería estar viendo una lista de artículos.   5. Mostrar una sola publicación de blog  5.1. Vincular la publicación  Para que se pueda hacer clic en cada título de la publicación, agregaremos el componente   de 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. Ruta API para una sola publicación  En la ruta de la API de Next.js, buscamos publicaciones específicas en función de su 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. Mostrar una sola publicación  Para mostrar publicaciones individuales, es fundamental comprender la diferencia entre los componentes del servidor y del cliente en Next.js.  El componente dado,   , utiliza la obtención de datos del lado del cliente. SinglePost  Esencialmente, esto significa que los datos se recuperan en el cliente después de que se haya renderizado la página. Permite una rica interactividad sin sacrificar el rendimiento. Se puede leer más sobre esto en la   . documentación de Next.js en React Essentials   Componentes del cliente  Los componentes de cliente le permiten agregar interactividad del lado del cliente a su aplicación. En Next.js, se   en el servidor y se hidratan en el cliente. Puede pensar en los componentes del cliente como la forma en que siempre han funcionado los componentes del   . procesan previamente enrutador 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> ) }  Ahora, debería poder ver los detalles del artículo. Por favor, disculpe la falta de estilo!   6. Uso de la interfaz de usuario de carga y transmisión en Next.js    para mejorar la experiencia del usuario, considere agregar un componente de carga. Next.js proporciona una solución integrada con la interfaz de usuario de carga y transmisión. Ayuda a mostrar una rueda giratoria de carga hasta que su contenido esté listo. Profundice más con esta   . Sugerencia: guía oficial sobre la carga de la interfaz de usuario y la transmisión  Por ejemplo:   // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}  7. Conclusión  Crear una aplicación Next.js puede ser divertido e instructivo.  Hemos aprendido a configurar un proyecto, administrar nuestra estructura de carpetas, enumerar publicaciones de blog, mostrar publicaciones individuales e incluso tocar estados de carga.  Con el rápido crecimiento de Next.js en la comunidad de desarrollo web, las habilidades aprendidas aquí son invaluables.  ¡Amplíe esta base, explore más funciones y disfrute de la codificación!  8. Referencias   Documentación oficial de Next.js  Para los datos del artículo, usé  DummyJson  Para construir el artículo, usé  StackEdit  Gracias por tu tiempo y dedicación al aprendizaje. Tus comentarios son inmensamente valiosos. Si tiene alguna adición o corrección a esta publicación, comuníquese con nosotros.  Conéctate conmigo en:   community  dev.to @leandro_nnz  comunidad    hackernoon.com @leandronz  Twitter  @digpollution  ¡Salud!

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 audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

Una guía paso a paso para crear un blog sencillo de Next.js 13

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una breve introducción a la teoría del cerebro de Boltzmann

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Una breve introducción a la teoría del cerebro de Boltzmann

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps