Crear una web con NextJS 13 desde cero

Quiero que aprendas cómo crear una página web sencilla con Next.js, React y Typescript desde cero: preparación del proyecto y ejecución local.

Qué es NextJS

NextJS es un framework basado en React y Javascript, que nos permite crear aplicaciones web tanto del lado del servidor (Server Side Rendering, SSR) como del cliente (Cliente Side Rendering, CSR). También nos permite generar páginas estáticas (Static Site Generation, SSG), incluye soporte para Typescript y para CSS-in-JS, lo que lo hace una herramienta muy versátil.

Preparación del proyecto

Lo primero que necesitas es instalar node.js en tu ordenador si no lo tienes ya. Puedes ver cuál es la última versión estable de node en este enlace. En mi caso utilizo la herramienta NVM (Node Version Manager) para instalar y gestionar versiones de node, que te enseño cómo instalarla en este otro post.](https://www.pirobits.com/post/gestionando-versiones-de-node-js-con-nvm)

Ahora ya puedes inicializar la carpeta del proyecto con el siguiente comando en una terminal:

npx create-next-app@latest --typescript

El comando te guiará mediante una serie de preguntas para configurar el entorno base. En mi caso, selecciono las siguientes opciones:

• project name: web-test
• use ESlint: yes
• use src directory: yes
• experimental app directory: no
• import alias: @

Espera a que instale las dependencias y listo, ya tienes la base del proyecto preparada. Desde una terminal, navega al directorio del proyecto con cd web-test, y ejecuta la aplicación con npm run dev.

Abre tu navegador favorito y navega a http://localhost:3000, donde podrás ver la aplicación.

 Estructura de carpetas

El comando create-next-app por defecto genera la siguiente estructura de carpetas:

• node_modules: dependencias de nuestro proyecto node.
• pages: sistema de routing de NextJS. Cada fichero es una vista asociado a una ruta.
• public: contenido estático (imágenes).
• styles: estilos CSS.

En otro post te explicaré en profundidad el nuevo directio app que por ahora es una beta. Yo ya me he encontrado algún bug que he reportado en GitHub.

Personalmente me gusta añadir algunas carpetas como:

• components: donde añado componentes de React reutilizables.
• lib: funciones y código reutilizable en diferentes vistas o el servidor.
• tests: test unitarios.
• e2e: test end to end.

Hay otras carpetas que puedes usar:

• pages/api: esta carpeta te permitirá crear una API aprovechando el propio servidor de node de NextJS o funciones serverless.

Creando vistas de la página

¿Qué te gustaría aprender a continuación? ¿Te gustaría un tutorial más completo?

Envíame un comentario desde el formulario de contacto para contarme tus necesidades, y no olvides suscribirte a la newsletter para estar atento cuando salga la siguiente parte 😉