Next.js para Principiantes: Una Guía Completa
Next.js es un framework de React de código abierto que te permite crear aplicaciones web rápidas y optimizadas para SEO. Es especialmente conocido por su capacidad de renderizado del lado del servidor (SSR), que mejora el rendimiento y la indexación de tu sitio web. Este manual te guiará paso a paso por el proceso de aprender Next.js, desde la instalación hasta el despliegue.
Next.js se ha convertido en una opción popular para desarrolladores de React debido a sus características que simplifican el desarrollo y optimizan el rendimiento. A diferencia de herramientas como Gatsby o create-react-app, Next.js te permite generar sitios web estáticos y dinámicos de forma eficiente, ofreciendo un control fino sobre el proceso de renderizado.
Entendiendo las ventajas de Next.js
Next.js ofrece una serie de beneficios que lo diferencian de otros frameworks de React:
- Recarga en caliente (Hot Reloading): Realiza actualizaciones instantáneas en el navegador al modificar el código, lo que acelera el desarrollo.
- Enrutamiento automático: Maneja el enrutamiento de forma automática, sin necesidad de configurar rutas manualmente.
- Componentes de un solo archivo (Single File Components): Permite encapsular el código, los estilos y la lógica de un componente en un único archivo.
- Renderizado del lado del servidor (SSR): Genera el HTML de tu sitio web en el servidor, mejorando el SEO y la velocidad de carga.
- Compatibilidad con el ecosistema de React: Funciona perfectamente con otras herramientas de React como Redux y React Router.
- Separación automática del código: Divide el código en bundles específicos para cada página, optimizando la carga de la aplicación.
- Precarga: Permite precargar componentes y recursos para mejorar la velocidad de carga.
Instalando Next.js
Existen dos maneras de instalar Next.js: utilizando la herramienta create-next-app o configurando manualmente el proyecto.
Instalación con create-next-app:
bash
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
Configuración manual:
- Crea un nuevo directorio para tu proyecto.
- Inicializa un proyecto npm:
npm init -y. - Instala Next.js:
npm install next react react-dom. - Crea un archivo
pages/index.js:
«`javascript
import React from ‘react’;
const Home = () => (
¡Bienvenido a mi aplicación Next.js!
);
export default Home;
«`
- Ejecuta el servidor de desarrollo:
npm run dev.
Verificando el renderizado del lado del servidor
Para verificar que Next.js está renderizando tu aplicación del lado del servidor, puedes inspeccionar el código fuente de la página.
- Abre la página
http://localhost:3000en tu navegador. - Haz clic con el botón derecho del ratón y selecciona «Inspeccionar».
- Ve a la pestaña «Elementos» (Elements) y observa el código HTML.
El código HTML que se muestra en el inspector debería ser el mismo que el que se generó en el servidor. Esto indica que Next.js está funcionando correctamente.
Explorando la estructura de la aplicación
El archivo package.json contiene la configuración del proyecto, incluyendo las dependencias, scripts y metadatos. El archivo pages/index.js contiene el código del componente de la página principal.
La carpeta public almacena archivos estáticos como imágenes, archivos CSS y otros recursos.
Creando la primera página
Crea un nuevo archivo pages/about.js:
«`javascript
import React from ‘react’;
const About = () => (
Acerca de mi aplicación
Este es el contenido de la página «Acerca de».
);
export default About;
«`
Al refrescar la página en http://localhost:3000/about, verás el contenido de la página «Acerca de».
Enrutamiento dinámico
Next.js permite crear URLs dinámicas utilizando corchetes [] en el nombre del archivo.
Crea un nuevo archivo pages/posts/[id].js:
«`javascript
import React from ‘react’;
const Post = ({ id }) => (
Post {id}
);
export default Post;
«`
En este ejemplo, id es un parámetro dinámico. Para acceder al valor de id, podemos usar el objeto router que Next.js proporciona.
«`javascript
import React from ‘react’;
import { useRouter } from ‘next/router’;
const Post = () => {
const router = useRouter();
const { id } = router.query;
return (
Post {id}
);
};
export default Post;
«`
Enlaces entre páginas
Next.js proporciona el componente Link para crear enlaces entre páginas.
«`javascript
import React from ‘react’;
import Link from ‘next/link’;
const HomePage = () => (
Página principal
);
export default HomePage;
«`
Precarga
El componente Link de Next.js ofrece precarga, que permite cargar los recursos necesarios para la página de destino antes de que el usuario haga clic en el enlace.
Datos de los componentes con getInitialProps
La función getInitialProps te permite proporcionar datos a los componentes de Next.js antes de que se rendericen en el servidor.
«`javascript
import React from ‘react’;
import { useRouter } from ‘next/router’;
const Post = ({ post }) => (
{post.title}
{post.content}
);
Post.getInitialProps = async ({ query }) => {
const { id } = query;
const res = await fetch(https://api.example.com/posts/${id});
const post = await res.json();
return { post };
};
export default Post;
«`
Estilos
Next.js admite diferentes métodos para dar estilo a los componentes:
- Styled-jsx: Permite escribir CSS dentro de los componentes de React.
- CSS de hoja de estilos: Puedes importar archivos CSS externos en tus componentes.
- CSS de módulos: Asigna nombres de clase únicos a los estilos para evitar conflictos.
Agregando información a la cabecera
Puedes agregar información a la cabecera de la página utilizando el componente Head de Next.js.
«`javascript
import React from ‘react’;
import Head from ‘next/head’;
const HomePage = () => (
Página principal
);
export default HomePage;
«`
Componentes envolventes
Los componentes envolventes (wrapper components) te permiten crear un diseño consistente en toda la aplicación.
«`javascript
import React from ‘react’;
const Layout = ({ children }) => (
Encabezado
{children}
);
export default Layout;
«`
Rutas API
Next.js te permite crear endpoints que sirven JSON utilizando rutas API.
Crea un nuevo archivo pages/api/comments.js:
«`javascript
import { NextApiRequest, NextApiResponse } from ‘next’;
const handler = (req: NextApiRequest, res: NextApiResponse) => {
const comments = [
{ id: 1, text: ‘Comentario 1’ },
{ id: 2, text: ‘Comentario 2’ },
];
res.status(200).json(comments);
};
export default handler;
«`
Este endpoint devolverá una lista de comentarios en formato JSON.
Ejecutando código en el servidor o en el cliente
Puedes usar typeof window para ejecutar código solo en el lado del servidor o en el lado del cliente.
«`javascript
import React from ‘react’;
const MyComponent = () => {
if (typeof window !== ‘undefined’) {
// Código para ejecutar en el lado del cliente
} else {
// Código para ejecutar en el lado del servidor
}
return
;
};
export default MyComponent;
«`
Despliegue
Puedes desplegar tu aplicación Next.js localmente o utilizando una plataforma de despliegue como Now.
Despliegue local:
- Ejecuta el comando
npm run buildpara generar los archivos de producción. - Ejecuta el comando
npm run startpara iniciar el servidor de producción.
Despliegue con Now:
- Instala la herramienta Now:
npm install -g now. - Ejecuta el comando
nowpara desplegar tu aplicación.
Análisis de paquetes
Puedes analizar los paquetes de tu aplicación Next.js utilizando el comando analyze.
bash
npm run build
npm run analyze
El comando analyze generará un informe que muestra el tamaño de los bundles de tu aplicación.
Optimización del tamaño de los bundles
Puedes optimizar el tamaño de los bundles de tu aplicación Next.js utilizando importaciones asíncronas.
«`javascript
import React, { lazy, Suspense } from ‘react’;
const MyComponent = lazy(() => import(‘./MyComponent’));
const HomePage = () => (
}>