Creación de proyecto con Next.js y configuración de TypeScript

Clase 3 de 16 • Curso de React.js con TypeScript

Andrés Sánchez

student•

Crear una app con next.js

npx create-next-app@latest --typescript --use-npm

Para que quede como en el proyecto de Jonathan Would you like to use ESLint with this project? › No / ++Yes++ Would you like to use src/ directory with this project? › ++No++ / Yes Would you like to use experimental app/ directory with this project? › ++No++ / Yes

Ejecutar el proyecto

npm run dev

tsconfig.ts

“strict" : true "noImplicitAny": true, “noImplicitReturns”: true,

.eslintrc.json

“rules”:{ "@next/next/no-img-element":“off”, “jsx-a11y/alt-text”:“off” }

Tailwind

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

tailwind.config.js

content: [ "./app//*.{js,ts,jsx,tsx}", "./pages//.{js,ts,jsx,tsx}", "./components/**/.{js,ts,jsx,tsx}", ],

global.css

@tailwind base; @tailwind components; @tailwind utilities;

Uso

<h1 className=“text-3xl font-bold underline”> Hello world! </h2>

José Fabián Beltrán Meza

student•

Gracias por el aporte.

Alfonso Neil Jiménez

student•

la última versión de Next.js ya permite instalar TailwindCSS por default y recomienda usar App Router, personalmente tengo más experiencia usando Page Router y por eso elegí esa opción en la instalación

Silvia Corrales

student•

¿Por qué es una buena opción hacer este curso de React con TypeScript construido con Next.js? Les cuento algo 👇

Cuando vi que sacaron este curso me emocioné muchísimo porque una de mis metas de este año es aprender TypeScript y utilizarlo en React. Pero luego, cuando comencé el curso me incomodó un poco porque no me esperaba que estuviese hecho con Next.js 😣 Y pues, lo abandoné a la tercera clase porque al momento de instalarlo me estaba dando errores y no sabía nada de Next.js.

Una semana después, decidí dejar de lado la frustración y volví a retomar el curso por estas razones:

No pienso rendirme tan fácil al primer error que tenga porque de lo contrario no me serviría de nada seguir formandome como desarrolladora.
Creo que lo mejor es aprender Next.js, porque es una tecnología que nos brinda muchas facilidades al momento de desarrollar aplicaciones en React.
La ultima razón y creo que una de las más importantes, es que incluso en la documentación de React, sus propios creadores recomiendan que para crear proyectos se utilice alguno de los marcos de trabajo que ellos recomiendan, siendo Next.js el primero de entre los que recomiendan.

Así que a darle! 💪 Es normal sentir miedo y rechazo hacía las cosas que no conocemos... solo debemos tomar en cuenta que en ocasiones al aprender esas cosas/tecnologías que no conocemos podremos llegar más lejos 💫

Raul Valdez Piedra

student•

Hola, a mi me paso lo mismo, yo pensé que era react puro, porque aunque Next.js es react, tiene otro enfoque completamente diferente, es aprender a tipar react aprendiendo otras cosas, si me desanimo mucho esto, voy a intentar seguir el curso a ver que sale, pero si esperaba que fuera React puro y solíto, en fin, 😪😩

PD. Pienso que el titulo del curso debería de ser Next.Js con Typescript

Olga Acosta Bravo

student•

La fuente que está usando el prof Jonathan en su VSC me confunde, pero espero en las otras clases poder verlo mejor. :sob:

David Hilera

student•

Me pasa lo mismo, eso y que su editor lo tenga en light.

Julio Santacruz

student•

tsconfig.json

.....
"strict":true,
"noImplicitAny": true,
    "noImplicitReturns": true,

.eslint.json (configuracion de curso, no recomendado para produccion)

......
"rules":{
    "@next/next/no-img-element":"off",
    "jsx-a11y/alt-text":"off"
  }

John Davis Pablo Valverde

student•

Con este comando de instalación y los siguientes pasos quedaria igual al proyecto del curso, recordemos que hoy en dia ya se esta usando la versión 13 de Nextjs.

David Rangel

student•

Tuve problemas al trabajar con el proyecto por la version de next (a la fecha de este cometnario es v. 13 o mas). Por eso decidi usar este comando para usar la misma version del curso:

npx create-next-app@12.2.3 --ts --use-npm

andres.morantes

student•

Heroe

Luisa Fernanda Giraldo Espinosa

student•

Y acá la forma de instalar tailwind https://v3.tailwindcss.com/docs/guides/nextjs

PAULA ANDREA CIRO CHAVARRIAGA

student•

¿Por qué estás utilizando esta fuente de texto en el programa? Es difícil de entender.

Ismael Cruz Procel

student•

Gabriel Cordero

student•

npx create-next-app@latest --ts --use-npm Es un comando bastante impresionante porque instala todo esto:

react
react-dom
next
typescript
@types/react
@types/node
@types/react-dom

Rodrigo Damián Martinez

student•

Muchas gracias!

Gustavo Pú

student•

Como es posible que al profesor le gusta el modo claro 😅

Ricardo Aguilar

student•

¡Recuerden que la configuración de TailwindCSS es una distinta con ya que usamos Next.js! https://tailwindcss.com/docs/guides/nextjs

Tomas Langer Duran

student•

que triste que use el fondo blanco, me limita completamente poder realizar este curso

Francisco Salazar

student•

![](

Jose Manuel Hernandez De la Cruz

student•

<h1 className="text-3xl font-bold underline">
      Hello world!
</h2>

Andrei Bahamon

student•

Al crear el proyecto porque no me creo la carpeta pages?

Ismael Cruz Procel

student•

Si usaste la ultima version de node probablemente tu proyecto contiene la carpeta App en lugar de Pages.

Juan Camilo Noreña López

student•

Al crear el proyecto con el comando => 'npx create-next-app@latest --typescript --use-npm'; nos da unas opciones de configuración la cual ya nos permite añadir tailwindcss a nuestro proyecto y viene ya configurado; Otra cosa es que la estructura de archivos y carpetas al crear el proyecto ya cambio, para tenerlo en cuenta

Alfonso Adrián Segovia Martín

student•

Ya vieron este sitio para crear el proyecto de Next.js en segundos y probar el código online? CodeSandbox Díganme si les parece interesante.

Albert K. Camargo Barreda

student•

.eslintrc.json queda asi:

{
  "extends": "next/core-web-vitals",
  "rules": {
    "@next/next/no-img-element": "off",
    "jsx-a11y/alt-text": "off"
  }
}

Max Andy Diaz Neyra

student•

Adaptaciones para Next 15:


const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@next/next/no-img-element": "off",
      "jsx-a11y/alt-text": "off",
    },
  },
];

```&#x9;

Elmer Vargas

student•

¿Qué tema utiliza para que salga la rama que está ubicada y la versión de node?

Camilo Taborda

student•

en mi caso fue imposible inicializar el proyecto con Next.js , por mi parte trabajaré con Vite

Creación de proyecto con Next.js y configuración de TypeScript

Introducción

TypeScript y React: Proyecto Práctico con Next.js

Tipado Implícito y Explícito en TypeScript

Creación de proyecto con Next.js y configuración de TypeScript

Tipado en React

Componentes de React con TypeScript: Creación de Lazy Image

Definición de Props en Componentes React con TypeScript

Tipado de useState en React con TypeScript

Refactorización de Tipos en TypeScript y React

React y el DOM

Manejadores de Eventos en React con TypeScript

Lazy Loading de Imágenes con React y TypeScript

Uso de IntersectionObserver en React para Carga Diferida de Imágenes

Creación de Componentes Genéricos con TypeScript y Lazy Loading

Implementación de onLazyLoad en React con TypeScript

Configuraciones avanzadas

Uso Correcto de Tipos Globales en TypeScript

Creación de Tipos Personalizados para Librerías en TypeScript

Integración de Plugins Externos en TypeScript

Próximos pasos

Tipado Avanzado en Redux con TypeScript y React