Qué maravilla, amo este curso. Es porque lograron hacerlo conceptual pero a la vez práctico. A veces lo hacen muy enfocado en el proyecto y se olvidan de lo que están enseñando. El curso de React me parece que comete ese error, se enfoca más en enseñarte a hacer una Todo-App que en enseñarte React.
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,
Creación de arquitectura de landing page en Next.js
9/57Recursos
Aportes 10
Preguntas 4
Ordenar por:
Para exportar los componentes, lo organizo de otra manera...
```js
-components
|__Footer
|__index.tsx
|__styles.module.ts
|__index.ts
```En el index del Footer desarrollo el componente:
```js
const Footer = () => {};
export defalut Footer;
```Y en el index de la carpeta componentes exporto todos los componentes:
```js
export {deafult as Footer} from './Footer';
```Entonces cuando necesito importar varios componentes de esta misma carpeta, tengo una sola línea de importación:
```js
import {Footer, OtroComponente, OtroComponente} from './components';
```
Me parece una falta de respeto no decir cuál es el tema y qué extensión para los iconos usa el profesor u.u
Otra forma de organizar, es como lo utilizo,
shared/Footer/index.tsx (Componente)
shared/Footer/handlers.ts (Metodos, utils, etc)
Tengo una duda que no me deja vivir 🙋🏻.
Si bien envolviendo nuestro layout con la anotación de "use client", va a envolver toda nuestra aplicación con un renderizado del lado del cliente, perdiendo el performance.
En ese orden de ideas...
Como se debería manejar a la hora de crear un estado global con redux por ejemplo?
Imagen de ejemplo practico:
oficialmente mi profe fav de platzi, que bien explica los temas!
Siento que así como de fácil es armar una aplicación con buen performance en Nextjs así de fácil es regarla y hacer algo que no tenga buen performance
```txt
____src
____app
____features
____home
____components
Home.tsx
____shared
____components
____Header
____Header.tsx
____Footer
____Footer.tsx
index.ts
____utils
```
Hola yo lo hago de esta manera
src-----
\_\_app
\_\_shared
\_\_components
\_\_Footer
\_\_Footer.tsx
\_\_Header
\_\_Header.tsx
index.tsx
![]()![]()![]()
Me he quedado atascado en cierta forma, ya que me dice que mi tienda no tiene un tema. Creo que esto se debio de haber mostrado el como crearlo primero o como terminar de hacer todos los setting de nuestra tienda de shopify.
El curso me ha gustado y aunque graphql no lo he trabajado mucho, honestamente hay muchas partes donde falta comentar donde hizo cierto cambio, el por que de algunas cosas y dejar algun aviso donde podamos ver que si se da un error, en la siguiente clase se solucionara. Ya me ha pasado que por esto ultimo perdi hasta una hora pensando que en algo la heche a perder.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?