Next.js 45: Redirects y Rewrites
easy⏱ 5 mincoursenextjs
Tiempo de configuración vs tiempo de ejecución
redirects()/rewrites() en next.config.js se evalúan una sola vez, al hacer build/arrancar, contra una lista fija de patrones source → destination — ideales para reestructurar URLs de forma permanente (permanent: true → 308) o dar soporte a rutas antiguas. redirect() de next/navigation, usado dentro de un componente, corre por cada petición y puede reaccionar a cualquier cosa que puedas calcular durante el render.
// next.config.js — build-time, pattern based
module.exports = {
async redirects() {
return [
{ source: '/old-pricing', destination: '/pricing', permanent: true },
{ source: '/docs/:path*', destination: '/help/:path*', permanent: false },
];
},
async rewrites() {
return [{ source: '/blog/:slug', destination: '/posts/:slug' }];
},
};
// inside a Server Component — runtime, conditional
import { redirect } from 'next/navigation';
export default async function CheckoutPage() {
const user = await getUser();
if (!user.isPremium) redirect('/pricing');
return <Checkout />;
}
Haz coincidir ambos tipos
Haz clic en las rutas de ejemplo y confirma que /old-pricing y /docs/getting-started coinciden con una regla de configuración (mostrando 307/308 y el destino resuelto) mientras que /about no. Luego activa/desactiva isPremium y renderiza /checkout para ver el redirect() condicional dispararse solo cuando está apagado.
Prefiere next.config.js cuando puedas
Un redirect en tiempo de configuración es más barato (ni siquiera se renderiza un componente) y más fácil de auditar como una lista plana. Usa un redirect() en tiempo de ejecución solo cuando el destino realmente depende de algo que no puedes saber de antemano, como los datos del usuario actual.