Pirobits
  

Crear una web con NextJS 13 desde cero

alberto avatar Alberto Sola · 2/26/2023 · 3 min

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.

En otro post puedo tratar el SSR/SSG en profundidad, recuerda que puedes contarme qué te gustaría aprender desde el formulario de contacto.

Preparación del proyecto

Mi editor por defecto suele ser VSCode, aunque tu puedes usar el que más cómodo te sientas.

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

La opcición --typescript permite crear una base totalmente operativa con Typescript. Si quieres usar javascript sin tipos, simplemente no añadas esta opción.

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: @

Si no sabes qué elegir, las opciones que vienen por defecto son las recomendadas.

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 😉

Si te ha resultado útil este artículo agradecería si te suscribes a mi newsletter. Recibirás contenido exclusivo de calidad y también me ayudarás enormemente. Cada suscripción apoya el trabajo que realizo y me permite conocer mejor los temas que te interesan, de forma que puedo mejorar los conocimientos que comparto contigo.

Posts recientes