Arquetipo - NextJS

¿Que es un Arquetipo?

Un arquetipo es un modelo base para la creación de proyectos, aplicaciones o sistemas. En este contexto, los arquetipos ayudan a establecer una estructura inicial estándar para facilitar el desarrollo.

El arquetipo tendrá todas las librerías necesarias y bases para que se pueda reutilizar y crear aplicaciones a partir de el.

---

Estructura proyecto Arquetipo

La siguiente es la estructura que generaremos para crear nuestro arquetipo de NextJS.

.
├── start_app.sh           # Script con la logica para generar el arquetipo.
├── Dockerfile             # Dockerfile base que contendra el arquetipo.
├── .gitignore             # Archivos y carpetas a ignorar por Git.      
└── .dockerignore          # Archivos y carpetas a ignorar por Docker.

Contenido del archivo start_app.sh :

npx create-next-app base-app --use-npm

cp "Dockerfile" "./base-app"
cp ".dockerignore" "./base-app"

cd base-app
mkdir -p components app/api hooks utils interfaces

npm install --save typescript react eslint axios @mui/material @emotion/react @emotion/styled next@15.1.6

Contenido del archivo Dockerfile :

1. En este caso extiende de la imagen base de NodeJS 20 alpine.

2. Hace una copia de todo el contenido a la carpeta /app.

3. Ejecuta el comando npm install para instalar todas las dependencias bases necesarias.

4. Por ultimo el CMD contiene el comando determinado para que se inicie el contenedor.

FROM node:20-alpine
COPY . /app
RUN npm install

CMD ["npm", "run", "start"]

Creación de proyecto a partir del Arquetipo

Una vez que tenemos los archivos definidos anteriormente en el directorio de nuestro arquetipo de NextJS, ejecutamos el archivo start_app.sh el cual generara un directorio llamado base-app que contendra la siguiente estructura correspondiente a un proyecto NextJS en su versión 15.

.
├── public/                 # Archivos públicos accesibles desde el navegador
│   ├── favicon.ico         # Favicon del proyecto
│   ├── images/             # Imágenes estáticas
│   └── robots.txt          # Configuración de bots
├── app/                    # Directorio de Router app de NextJS
│   ├── api/                # Directorio para agregar interacciónes con API's
│   ├── layout.tsx          # Layout principal de la app NextJS
│   ├── page.tsx            # Componente que se renderizara al iniciar la aplicación
│   ├── utils/              # Utilidades y funciones auxiliares
│   │   └── Const.ts        # Ejemplo de definicion de constantes
│   ├── hooks/              # Custom hooks
│   │   └── useExample.ts   # Ejemplo de custom hook
│   └── interfaces/         # Directorio para almacenar interfaces de typescript
├── Dockerfile              # Dockerfile para contenerizar la aplicación.
├── .eslintrc.json          # Configuración de ESLint
├── .gitignore              # Archivos y carpetas a ignorar por Git
├── .dockerignore           # Archivos y carpetas a ignorar por Docker
├── next.config.js          # Configuración de Next.js
├── package.json            # Dependencias y scripts del proyecto
└── tsconfig.json           # Configuración de TypeScript

Conclusión

Un arquetipo sirve para que diferentes equipos puedan reutilizarlo y crear proyectos con una estructura y dependencias homologadas a partir de el, manteniendo cierta coherencia en cada proyecto.

Plus

Si se quiere probar la aplicación base desde un contenedor, al contener el Dockerfile previamente configurado se puede construir la imagen y luego ejecutarla localmente para realizar pruebas a partir de un contenedor.

Comandos

docker build -t example-project-nextjs .
docker run -p 3000:300 -t example-project-nextjs