Cómo definir rutas en Nextjs
- Introducción a Next.js
- Rutas Básicas
- Rutas Dinámicas
- Navegación entre Rutas
- Optimización de Rutas con getStaticPaths y getStaticProps
- Redireccionamientos y Reescrituras
- Rutas API
- Middleware
- Conclusión
Introducción a Next.js
Next.js proporciona una estructura de carpetas basada en el sistema de archivos para definir rutas, lo que simplifica la creación de páginas y la gestión de la navegación dentro de la aplicación. Además, Next.js ofrece capacidades de enrutamiento dinámico, redireccionamientos, y reescrituras, entre otras características.
Rutas Básicas
Creación de Páginas
En Next.js, cada archivo en la carpeta pages automáticamente se convierte en una ruta en tu aplicación. Por ejemplo, si creas un archivo about.js en la carpeta pages, automáticamente se puede acceder a esa página en /about.
// pages/about.js
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page.</p>
</div>
);
}Rutas Anidadas
Puedes crear rutas anidadas mediante la creación de subcarpetas dentro de la carpeta pages. Por ejemplo, si creas una carpeta blog y dentro de ella un archivo post.js, la ruta será /blog/post.
// pages/blog/post.js
export default function Post() {
return (
<div>
<h1>Blog Post</h1>
<p>This is a blog post.</p>
</div>
);
}Rutas Dinámicas
Parámetros de Ruta
Next.js permite crear rutas dinámicas mediante el uso de corchetes en los nombres de los archivos. Por ejemplo, para crear una página de perfil de usuario con una URL dinámica como /user/[id], puedes crear un archivo [id].js dentro de una carpeta user.
// pages/user/[id].js
import { useRouter } from 'next/router';
export default function UserProfile() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>User Profile</h1>
<p>User ID: {id}</p>
</div>
);
}
En este ejemplo, router.query proporciona acceso a los parámetros de la ruta, permitiendo que el componente reciba el id del usuario directamente desde la URL.
Rutas Dinámicas Anidadas
También puedes crear rutas dinámicas anidadas. Por ejemplo, para crear una estructura de blog donde cada post pertenece a un autor específico, puedes crear una carpeta author y dentro de ella otra carpeta [authorId], y luego un archivo [postId].js.
// pages/author/[authorId]/[postId].js
import { useRouter } from 'next/router';
export default function BlogPost() {
const router = useRouter();
const { authorId, postId } = router.query;
return (
<div>
<h1>Blog Post</h1>
<p>Author ID: {authorId}</p>
<p>Post ID: {postId}</p>
</div>
);
}Navegación entre Rutas
Next.js proporciona el componente Link para facilitar la navegación entre páginas.
Uso del Componente Link
Para crear enlaces de navegación, utiliza el componente Link de next/link.
// pages/index.js
import Link from 'next/link';
export default function Home() {
return (
<div>
<h1>Home Page</h1>
<nav>
<Link href="/about">
<a>About</a>
</Link>
<Link href="/user/123">
<a>User Profile</a>
</Link>
</nav>
</div>
);
}Navegación Programática
También puedes realizar la navegación programáticamente utilizando el hook useRouter.
// pages/index.js
import { useRouter } from 'next/router';
export default function Home() {
const router = useRouter();
const goToProfile = () => {
router.push('/user/123');
};
return (
<div>
<h1>Home Page</h1>
<button onClick={goToProfile}>Go to User Profile</button>
</div>
);
}Optimización de Rutas con getStaticPaths y getStaticProps
Cuando se crean rutas dinámicas, Next.js ofrece funciones como getStaticPaths y getStaticProps para optimizar la generación de páginas estáticas.
getStaticPaths
Esta función se utiliza para especificar qué rutas dinámicas deben generarse estáticamente.
// pages/user/[id].js
export async function getStaticPaths() {
const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const { id } = params;
return { props: { id } };
}
export default function UserProfile({ id }) {
return (
<div>
<h1>User Profile</h1>
<p>User ID: {id}</p>
</div>
);
}getStaticProps
Esta función se utiliza para obtener datos en tiempo de construcción para una página específica.
// pages/user/[id].js
export async function getStaticProps({ params }) {
const { id } = params;
const user = await fetch(`https://api.example.com/user/${id}`).then(res => res.json());
return { props: { user } };
}
export default function UserProfile({ user }) {
return (
<div>
<h1>User Profile</h1>
<p>User ID: {user.id}</p>
<p>User Name: {user.name}</p>
</div>
);
}Redireccionamientos y Reescrituras
Redireccionamientos
Next.js permite configurar redireccionamientos en el archivo next.config.js.
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/old-route',
destination: '/new-route',
permanent: true,
},
];
},
};Reescrituras
Las reescrituras permiten mostrar una URL diferente a la que está en la ruta.
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/about',
destination: '/company/about',
},
];
},
};Rutas API
Next.js también permite crear rutas de API dentro de la carpeta pages/api. Cada archivo en esta carpeta se convierte en un endpoint de API.
// pages/api/user.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' });
}
Puedes acceder a esta API en /api/user.
Middleware
Next.js 12 introdujo la capacidad de usar middleware para ejecutar código antes de que una solicitud sea completada.
// middleware.js
import { NextResponse } from 'next/server';
export function middleware(request) {
return NextResponse.redirect(new URL('/about', request.url));
}Coloca este archivo en la raíz del proyecto para que se aplique globalmente.
Conclusión
Next.js ofrece una manera poderosa y flexible de definir y gestionar rutas en aplicaciones web modernas. Desde la creación de rutas estáticas y dinámicas hasta la configuración de redireccionamientos y reescrituras, Next.js simplifica el proceso de navegación y optimización. Con una combinación de características integradas y prácticas recomendadas, puedes crear aplicaciones robustas y eficientes con facilidad.
Jorge García
Fullstack developer