Typescript Next.js template

Template creado a partir del proyecto de Next.js generado por medio de create-next-app donde se utiliza Typescript y se añaden nuevas configuraciones y dependencias.

Índice

• Typescript Next.js template
  • Índice
  • Ejemplo live
  • Empezando...
  • Tecnologías
  • Npm scripts
  • Make scripts

Ejemplo live

Template en producción

Empezando...

Para iniciar el proyecto:

make init
make dev
# or
yarn install
yarn dev

Abre http://localhost:3000 con tu navegador para ver el resultado.

Tecnologías

Nombre	Detalles
📦Webpack	Bundler para aplicaciones web
⚛️React	JavaScript Framework
⏭️Next	React Framework
🌐Typescript	Lenguaje de programación superconjunto de Javascript
👁️Eslint	Linter para controlar errores en nuestro código
🦋Prettier	Formatea nuestro código
🐺Husky	Comprueba errores en nuestro código para evitar errores en nuestros commit
🚫Lint-staged	Ejecuta los linters para evitar errores antes de hacer un commit
💅Emotion	CSS in JS - Permite usar "Styled-Components"
🧪Jest	Framework de testing
🐐Testing-library-react	Testing para nuestro UI
🌲Cypress	Testing end-to-end
🧾Hygen	Generador de código
📕Storybook	Herramienta de desarrollo de interfaces de usuario por componentes
🐏Makefile	Gestor de tareas, dependencias...

Npm scripts

Comando	Detalles
dev	Inicia server de desarrollo
build	Genera nuestra web
lint	Comprueba/Corrige si hay errores en nuestro código Javascript
format	Comprueba/Formatea nuestro codigo
precommit	Comprueba si hay errores en los staged changes antes de realizar un commit
test	Ejecuta test
test:e2e	Ejecuta tests end-to-end
new:fc	Genera un componente funcional con Emotion y "Styled-Components"
storybook	Inicia servidor de storybook
build-storybook	Construye el contenido de nuestro storybook

Make scripts

Comando	Detalles
init	Instala las dependencias necesarias del proyecto
dev	Inicia el servidor de desarrollo
build	Genera nuestra web
lint	Comprueba/Corrige si hay errores en nuestro código /JavascriptTypescript
format	Comprueba/Formatea nuestro código
precommit	Comprueba si hay errores en los staged changes antes de realizar un commit
test	Ejecuta los test unitarios
teste2e	Ejecuta lost tests end-to-end
new	Genera un componente funcional con Emotion y "Styled-Components"
storybook	Inicia servidor de storybook
build-storybook	Construye nuestro storybook
clean	Elimina varios elementos/carpetas