Creando una app con React y TypeScript

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"
  }

Crear una app con next.js

npx [email protected] --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!
</h1>

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

el comando para crear el proyecto

npx [email protected] --typescript --use-npm

Al iniciar el proyecto, tuve muchos inconvenientes desde la terminal, porque no me el archivo package.json dentro de mi proyecto, lo solucioné creando una “subcarpeta” de mi proyecto, dentro de la carpeta principal… Espero les sirva.

react-ts npx [email protected] --typescript --use-npm
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ What is your project named? … my-first-ts-app
✔ 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 / ✔ Would you like to use experimental app/ directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*

npx [email protected] --ts --use-npm
Es un comando bastante impresionante porque instala todo esto:

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

En mi caso, trataré de dejar las reglas de Nextjs tal y como vienen, no cambiaré nada

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

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.