Proyecto React con Next.js, TypeScript, Axios y Tailwind CSS

Este proyecto es una aplicación web básica que utiliza Next.js como framework de React, TypeScript para tipado estático, Axios para hacer peticiones HTTP a una API externa, y Tailwind CSS para estilizar la interfaz de usuario.

Instalación

Asegúrate de tener Node.js y npm instalados en tu máquina. Luego, sigue estos pasos:

Clona este repositorio:

git clone https://github.com/MrDavidAlv/react-nextjs-typescript.git

cd react-nextjs-typescript

Instalación de Tailwind CSS
```
npm install
```

Configuración

Instalación de Tailwind CSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Configuración de Tailwind CSS:
```
npx tailwindcss init -p
```

Integración con PostCSS:

module.exports = {
 plugins: {
         tailwindcss: {},
         autoprefixer: {},
     },
 };

Axios

Instalación de Axios:
```
npm install axios
```
Configuración de Axios:

En este proyecto, Axios se configura en src/utils/axiosInstance.ts. Asegúrate de que la configuración de Axios sea la adecuada para tu caso de uso.

Estructura del Proyecto

react-nextjs-typescript/
│
├── src/
│   ├── components/
│   │   └── PostTable.tsx
│   │
│   ├── pages/
│   │   ├── post/
│   │   │   └── [id].tsx
│   │   └── index.tsx
│   │
│   └── utils/
│       └── axiosInstance.ts
│
├── public/
│   ├── favicon.ico
│   └── vercel.svg
│
├── styles/
│   ├── globals.css
│   └── Home.module.css
│
├── tailwind.config.js
├── postcss.config.js
├── tsconfig.json
├── next.config.js
├── package.json
├── package-lock.json
└── README.md

Uso

Ejecuta la aplicación:
```
npm run dev
```
Esto iniciará el servidor de desarrollo de Next.js en http://localhost:3000.
Navegación:
- La página principal muestra una tabla de posts desde la API.
- Al hacer clic en un título de post, se redirige a una página de detalles del post.
Tabla de posts desde la API

Vista de detalles de un post

Referencia

Este proyecto se basa en el tutorial Clon de X con Next.js 13, Supabase, React, TypeScript y TailwindCSS del youtuber midulive