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

Tabla de contenido

1. Introducción
2. Configuración del proyecto
3. Comprender la estructura de carpetas
4. Listado de todas las publicaciones de blog
5. Mostrar una sola publicación de blog
6. Uso de la interfaz de usuario de carga y transmisión en Next.js
7. Conclusión
8. 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 yarn en esta guía, siéntete libre de usar npm o pnpm :

 yarn dev

Ahora, visite http://localhost:3000 donde encontrará la página de plantilla predeterminada de Next.js.

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 /app/api/posts/route.js , configuraremos una API ficticia para publicaciones de blog. Aquí, next: { revalidate: 60 } especifica que nos gustaría revalidar nuestros datos cada 60 segundos.

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:

• Revalidación basada en el tiempo : 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 a pedido : 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 basada en tiempo

Para revalidar datos en un intervalo de tiempo, puede usar la opción next.revalidate de fetch para establecer la duración de la memoria caché de un recurso (en segundos).

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, PostsPage , que obtenga y muestre publicaciones de nuestro servidor. Aunque lo he diseñado mínimamente, ¡siéntete libre de animarlo!

 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 Link de 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. 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, SinglePost , utiliza la obtención de datos del lado del cliente.

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 procesan previamente 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 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

Sugerencia: 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 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: dev.to community @leandro_nnz

comunidad hackernoon.com @leandronz

Twitter @digpollution

¡Salud!