Intermedioreact
Routing con Next.js App Router
Comprende el sistema de rutas basado en archivos del App Router de Next.js.
Rutas basadas en archivos
En Next.js App Router, cada carpeta dentro de
app/ con un archivo page.tsx se convierte en una ruta. Las carpetas con [param] crean rutas dinamicas.jsx
1// app/page.tsx -> /
2// app/about/page.tsx -> /about
3// app/blog/[slug]/page.tsx -> /blog/mi-articulo
4
5// Pagina dinamica
6export default function BlogPost({ params }) {
7 return <h1>Articulo: {params.slug}</h1>;
8}
9
10// Layout compartido (app/layout.tsx)
11export default function RootLayout({ children }) {
12 return (
13 <html lang="es">
14 <body>
15 <nav>...</nav>
16 {children}
17 <footer>...</footer>
18 </body>
19 </html>
20 );
21}Navegacion con Link
El componente
Link de Next.js realiza navegacion del lado del cliente sin recargar la pagina completa.jsx
1import Link from "@/components/ui/LocalizedLink";
2
3function Navbar() {
4 return (
5 <nav>
6 <Link href="/">Inicio</Link>
7 <Link href="/about">Acerca de</Link>
8 <Link href="/blog">Blog</Link>
9 </nav>
10 );
11}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output