Como desarrollador con años de experiencia en React y Next.js, te puedo asegurar que la mejor forma de aprender es aplicando ejemplos reales y entendiendo el por qué detrás de cada patrón. En esta guía vas a encontrar next.js examples probados y claros que he usado personalmente en proyectos reales, desde aplicaciones sencillas para blogs hasta soluciones complejas con autenticación y backend integrado.
¿Por qué enfocarse en Next.js?
Next.js no es solo un framework más para React: es una herramienta que transforma la forma en que construimos aplicaciones web por varias razones clave:
- Renderizado híbrido y eficiente: Combina SSG (Static Site Generation), SSR (Server Side Rendering), ISR (Incremental Static Regeneration) y CSR (Client Side Rendering) según lo que necesites.
- Ruteo automático basado en archivos: Sin configuración extra, genera las rutas a partir de la estructura de carpetas.
- API Routes integrados: Backend sencillo integrado en el mismo proyecto.
- Optimización integrada: Maneja imágenes, fuentes, código dividido y más, optimizando el rendimiento y SEO.
Con estos beneficios, no es raro que cada vez más empresas elijan Next.js para proyectos desde MVPs hasta aplicaciones a escala.
Mi experiencia personal con Next.js examples
En uno de mis últimos proyectos, enfrenté un desafío común: crear un marketplace con cientos de productos, funcionalidades multilenguaje y autenticación segura sin sacrificar velocidad ni SEO. A partir de la utilización de varios ejemplos con SSR, SSG e integración API Routes pude armar una solución funcional en semanas. Esto reforzó para mí la importancia de disponer de ejemplos claros y prácticos, que te comparto a continuación para que aceleres tu aprendizaje.
Next.js examples prácticos y útiles para desarrolladores
1. Página estática básica con Static Site Generation (SSG)
// pages/index.js
export default function Home() {
return (
<main>
<h1>Bienvenido a Next.js!</h1>
<p>Esta es una página estática generada en build time.</p>
</main>
);
}
Este es el punto de partida de cualquier app Next.js: páginas que se generan estáticamente para máxima velocidad y SEO.
2. Obtener datos en tiempo real con Server Side Rendering (SSR)
export async function getServerSideProps() {
const res = await fetch(‘https://jsonplaceholder.typicode.com/posts/1’);
const post = await res.json();
return { props: { post } };
}
export default function Post({ post }) {
return (
<article>
<h1>{post.title}</h1>
<p>{post.body}</p>
</article>
);
}
Cuando necesitas mostrar datos frescos en cada carga, SSR es la estrategia a utilizar. En mis proyectos he usado SSR para dashboards y contenido dinámico.
3. API Routes: Backend ligero integrado
// pages/api/greet.js
export default function handler(req, res) {
res.status(200).json({ message: ‘Hola desde Next.js API Route’ });
}
Con API Routes puedes crear endpoints backend sin salir del proyecto Next.js. Lo he usado para manejar formularios, autenticación y microservicios simples.
4. Generación de rutas dinámicas para blogs o productos
// pages/posts/[id].js
export async function getStaticPaths() {
const res = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
const posts = await res.json();
const paths = posts.map(post => ({ params: { id: post.id.toString() } }));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } };
}
export default function Post({ post }) {
return (
<article>
<h1>{post.title}</h1>
<p>{post.body}</p>
</article>
);
}
Ideal para ecommerces o blogs con rutas generadas de forma estática por cada elemento.
5. Integración con bases de datos usando Prisma
// pages/api/users.js
import { PrismaClient } from ‘@prisma/client’;
const prisma = new PrismaClient();
export default async function handler(req, res) {
const users = await prisma.user.findMany();
res.status(200).json(users);
}
En un proyecto real ligado a bases de datos, Next.js + Prisma fue una combinación win-win que permitía consultas rápidas y mantenibilidad.
6. Autenticación con NextAuth.js (ejemplo básico)
Implementar autenticación segura no es trivial, por eso NextAuth facilita la integración con múltiples proveedores.
// pages/api/auth/[…nextauth].js
import NextAuth from ‘next-auth’;
import Providers from ‘next-auth/providers’;
export default NextAuth({
providers: [
Providers.GitHub({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
});
7. Uso de next/image para optimización automática de imágenes
Next.js gestiona automáticamente formatos, tamaños y carga eficiente para mejorar la experiencia del usuario.
import Image from ‘next/image’;
export default function Avatar() {
return <Image src=»/avatar.png» alt=»Avatar» width={150} height={150} />;
}
8. Internationalization (i18n) para apps multilenguaje
Configura y genera páginas en diferentes idiomas manteniendo SEO y estructura clara, perfecto para proyectos globales.
// next.config.js
module.exports = {
i18n: {
locales: [‘en’, ‘es’],
defaultLocale: ‘es’,
},
};
Más ejemplos con alto valor real y profesional
- Incremental Static Regeneration (ISR): revalidar páginas estáticas en segundo plano.
- Middleware para control avanzado de rutas y permisos.
- Uso de SWR para fetching de datos cliente eficiente.
- Integración con CMS headless (Contentful, Strapi).
Conclusión
¿Quieres dar el próximo salto? En KeepCoding tenemos un Bootcamp de Desarrollo Web donde abordamos Next.js junto a otras tecnologías punteras. Es la forma perfecta de transformar tu carrera y trabajar en proyectos reales desde cero. No esperes más para avanzar profesionalmente.
Si realmente quieres dominar Next.js, aprender con ejemplos que cubran desde conceptos básicos hasta implementaciones complejas es fundamental. Estos next.js examples que te he compartido reflejan casos que he afrontado personalmente, y que todo desarrollador debería conocer para construir aplicaciones modernas, rápidas y robustas. En mi experiencia, entender cuándo aplicar SSG, SSR o ISR, saber usar API Routes e integrar bases de datos y autenticación, marca la diferencia entre un proyecto funcional y uno sobresaliente. Te recomiendo la siguiente lectura React Official Documentation.
