Cómo crear rutas en Next.js

Curso de Next.js 14

Conceptos básicos de Next.js 14

¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?

Arquitectura de un proyecto de Next.js

Herramientas y stack utilizado en el curso

Cómo crear rutas en Next.js

Cómo crear Layout en Next.js

Cómo funciona la navegación en Next.js

Manejo de parámetros en rutas en Next.js

React Server Components en Next.js: notación "use Client"

Creación de arquitectura de landing page en Next.js

Quiz: Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

CSS Modules en Next.js 13

Uso de Sass en Next.js

Cómo utilizar estilos globales en Next.js

Cómo agregar archivos estáticos en Next.js

Manejo y optimización de imágenes con Next Image

Optimización del componente image en Next.js

Optimización de fuentes con Next.js

Creando estilos dinámicos aplicando condicionales en Next.js

Quiz: Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Creación de tienda de Shopify para un proyecto en Next.js

Manejo de variables de entorno en Next.js

Cómo obtener información de una API con Next.js

Manejo de estado de carga con el archivo loading.tsx

Route Grouping en Next.js

Manejo de errores en la UI con el archivo error.tsx

Quiz: Data Fetching en Next.js

Next.js Avanzado

Implementando páginas de Not Found y error global

Cómo impactan los React Server Components en un proyecto en Next.js

Cuándo utilizar layout o template en Next.js

Arquitectura profesional para data fetching en un proyecto en Next.js

Next.js para backend: manejando rutas con archivos Route Handlers

Proyecto: implementando la página de tienda

Patrones de data fetching en Next.js

Proyecto: filtrando categorías de productos

Data fetching de parámetros en el servidor y cliente

Proyecto: página de producto y arreglos en el sitio

Cómo funciona el Fetch y el Caché de Next.js

Revalidando cache con revalidateTag y revalidatePath en Next.js

Cómo hacer redirects en Next.js

Proyecto: HTML dinámico en la descripción del producto

Mejorando SEO de una página en Next.js

Quiz: Next.js Avanzado

Autenticación y autorización

Manejando autenticación y autorización con Storefront APÏ de Shopify

Server Actions en Next.js

Proyecto: proceso de Sign-Up con GraphQL

Manejo de cookies para colocar un token de acceso de un proyecto en Next.js

Cómo implementar un flujo de login en un proyecto en Next.js

Validando token de acceso de usuario en un proyecto en Next.js

Proyecto: implementando el carrito de compras

Manejo de estado global con zustand en Next.js

Proyecto: agregando items al carrito de compras

Cómo integrar el checkout de Shopify a un proyecto en Next.js

Implementar middleware en proyecto en Next.js para protección de rutas

Inteligencia Artificial

Creando componente de chatbot de ventas con la SDK IA de Vercel

Implementación de un bot de ventas en una app Next.js

Performance

Optimización de carga con parallel routing en Next.js

Análisis de bundle para Next.js 14

Quiz: Performance

Frontend Ops

Edge runtime

Despliegue de un proyecto Next.js en Vercel

Mejores prácticas en arquitecturas empresariales

Quiz: Frontend Ops

Next.js es parte de tu nuevo stack

¡Has creado un proyecto en Next.js!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 13

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan David Vanegas Roldán

hace un año

Rutas Estáticas:
Son rutas cuyos paths o URL son definidos de manera estática. Esto significa que el contenido asociado a estas rutas se genera durante la fase de compilación y no cambia después de que la aplicación ha sido construida y desplegada.

En Next.js, las rutas estáticas son típicamente creadas en el directorio pages de tu proyecto. Cada archivo en pages se convierte en una ruta estática.

pages/
├── index.js        // Ruta estática: /
├── about.js        // Ruta estática: /about
├── contact.js      // Ruta estática: /contact

En este ejemplo, /, /about, y /contact son rutas estáticas porque sus paths son definidos de manera fija y no cambian durante la ejecución de la aplicación.

Rutas Dinámicas:
Son rutas que pueden cambiar dinámicamente en función de parámetros específicos que se incluyen en la URL. Esto permite crear páginas que pueden manejar diferentes contenidos según los valores de los parámetros.

En Next.js, puedes lograr rutas dinámicas utilizando corchetes [] en los nombres de los archivos en el directorio pages.

pages/
├── posts/
│   ├── [id].js     // Ruta dinámica: /posts/[id]
│   ├── latest.js   // Ruta estática: /posts/latest

En este ejemplo, /posts/[id] es una ruta dinámica porque [id] es un marcador de posición para un parámetro que puede variar en cada solicitud. Puedes tener URLs como /posts/1, /posts/2, etc., y el valor de id se utiliza para personalizar el contenido de la página.

En resumen, las rutas estáticas se definen con paths fijos y su contenido se genera durante la compilación, mientras que las rutas dinámicas permiten manejar parámetros que pueden cambiar en función de la URL solicitada. Next.js ofrece una forma conveniente de trabajar con ambos tipos de rutas y proporciona una gran flexibilidad para desarrollar aplicaciones web. (Créditos a chatgpt)

Julio César Conrado sisnero

hace un año

por que nunca me salen las rutas si lo hago igual que en la clase, me sale que no encontró la pagina

Kevin Mejia

hace un año

Cuál es el tipado de next js para los params para acceder a ellos sin crear la interfaz? Next creo que debe tener esa interfaz creada y solo habría que importarla.

Raul Mercado

hace un año

no entendí la parte de la configuracion de los props. Entiendo que eso eso parte de Typescript.

Carlos Mario Gomez Gelvez

hace un año

yo lo hice de esta formaimport { FC } from "react"; interface CategoryProps { params: { category: string }; searchParams: {};} const Category: FC\<CategoryProps> = ({ params }) => { const { category } = params; return \

Ruta dinamica : {category}\

;}; export default Category; ```js import { FC } from "react"; interface CategoryProps { params: { category: string }; searchParams: {}; } const Category: FC<CategoryProps> = ({ params }) => { const { category } = params; return

Ruta dinamica : {category}

; }; export default Category; ```

Carlos Andres Bohorquez Duran

hace un mes

al hacerlo tal cual como esta en la clase me sale ester eroro, aunque la categoria si se imprime en el html, ![](https://static.platzi.com/media/user_upload/2024-10-27_07h43_38-7c03d029-7306-4401-873a-7e528eb615ae.jpg)

Victor Navarro

hace 6 meses

Creo que es bueno dejar saber que para que funcione el componente page debe ser exportado como default

Carlos Miranda

hace un año

De la manera que está en el curso no me dio la ruta, pero esta es mi sollución: `interface CategoryProps { params: { caregory: string }, searchParams: {}}` `export default function Category(``props``: CategoryProps) { const categoryID = ``props``.params.caregory` ` return (

Categoria: {categoryID}

)}`

Angel Esteban Patiño Salazar

hace 2 meses

![](https://static.platzi.com/media/user_upload/image-5dc25867-0e89-4a97-86a1-b52debeea7c1.jpg) jeje

Carlos Valdez

hace 4 meses

Hola, cual es el nombre de la tipografia si alguien sabe.

ANGEL LUGO

hace 6 meses

Porque utilizas function y no utilizas const y luego lo exportas? me gustaria saber tu opinion personal ![](https://static.platzi.com/media/user_upload/image-3e65e819-debd-4165-abd3-f9166da245c5.jpg)![]()

KEGOVC

hace 6 meses

**Rutas Estáticas:** Son rutas cuyos paths o URL son definidos de manera estática. Esto significa que el contenido asociado a estas rutas se genera durante la fase de compilación y no cambia después de que la aplicación ha sido construida y desplegada. * En Next.js, las rutas estáticas son típicamente creadas en el directorio `app` de tu proyecto. Cada archivo en `app` se convierte en una ruta estática. ```txt app/ ├── page.jsx // Ruta estática: / ├── about │ ├── page.jsx // Ruta estática: /about ├── contact │ ├── page.jsx // Ruta estática: /contact ``` En este ejemplo, `/`, `/about`, y `/contact` son rutas estáticas porque sus paths son definidos de manera fija y no cambian durante la ejecución de la aplicación. **Rutas Dinámicas:** Son rutas que pueden cambiar dinámicamente en función de parámetros específicos que se incluyen en la URL. Esto permite crear páginas que pueden manejar diferentes contenidos según los valores de los parámetros. * En Next.js, puedes lograr rutas dinámicas utilizando corchetes `[]` en los nombres de los archivos en el directorio `app`. ```txt app/ ├── posts/ │ ├── [id] │ │ ├── page.js // Ruta dinámica: /posts/[id] │ ├── latest.js │ │ ├── page.js // Ruta estática: /posts/latest ``` En este ejemplo, `/posts/[id]` es una ruta dinámica porque `[id]` es un marcador de posición para un parámetro que puede variar en cada solicitud. Puedes tener URLs como `/posts/1`, `/posts/2`, etc., y el valor de `id` se utiliza para personalizar el contenido de la página. En resumen, las rutas estáticas se definen con paths fijos y su contenido se genera durante la compilación, mientras que las rutas dinámicas permiten manejar parámetros que pueden cambiar en función de la URL solicitada. Next.js ofrece una forma conveniente de trabajar con ambos tipos de rutas y proporciona una gran flexibilidad para desarrollar aplicaciones web.

KEGOVC

hace 6 meses

<https://www.notion.so/C-mo-crear-rutas-en-Next-js-a9ba885be04f408a917ed753c352f104?pvs=4>