nextjs ts

Nextjs calderla

Una palidera en obstáculos para iniciar proyectos utilizando NextJs

Características

• ? Siguiente 13
• ⚛️ React 18
• ? Documento y aplicación personalizados
• ⌨️ Type Safety usando TypeScript en modo estricto
• ? Escribir SCSS y CSS futuro con PostCSS + Preset-Env
• ? Svg sprite para íconos
• ? Pase su código con Eslint y Stylelt
• ? Más bonito para un estilo de código constante
• ? Jest + Biblioteca de prueba para pruebas
• ☝️ Husky + pelusa para garantía de calidad del código
• Archivo EditorConfig para muescas consistentes
• ? Redux con react-redux y redux-thunk

Ramas de variación

Servidor personalizado

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Enzima

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

No Redux

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Empezando

Antes de que pueda comenzar a desarrollar su increíble aplicación, debe instalar las dependencias del proyecto. Asegúrese de tener nodo (> = 10.13.0) y NPM instalado y ejecutado:

$ npm install

⌨️ Desarrollo

Una vez que se hayan instalado todas las dependencias, puede comenzar el desarrollo. Para iniciar un servidor de desarrollo en http: // localhost: 3000 ejecución:

$ npm run dev

? Producción

Para ejecutar su aplicación en producción, asegúrese de ejecutar una compilación primero:

$ npm run build

Y luego inicie su aplicación con un número de puerto proporcionado (el valor predeterminado es 3000 si no se proporciona):

$ PORT=8080 npm run start

? Estático

También puede exportar su aplicación a un sitio web estático:

npm run export

Esto convertirá páginas HTML estáticas en ./out

? Treñeras

El Boilerplate proporciona un par de revestimientos para ayudarlo a vigilar la consistencia del código y la seguridad del tipo. Hay tres revestimientos: una para CSS, una para TypeScript y otra para la seguridad de los tipos. Puede usar cada uno de ellos por separado utilizando los siguientes comandos:

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

Consejo: Para aprovechar al máximo sus deleras, instale los complementos correspondientes (Stylelint, TSLint) para su editor o IDE

Más bonito

Prettier te ayuda a hacer cumplir el estilo de código consistente (obstinado). Si es posible, puede decirle a su editor que formatea su código cuando guarde un archivo. Si no puede hacer esto, puede ejecutar más bonito manualmente usando:

$ npm run prettier

? Pruebas

Puede escribir sus pruebas usando broma y enzima. Puede ejecutar todo la prueba con el siguiente comando

$ npm run test

Si desea seguir el desarrollo impulsado por las pruebas, puede usar:

$ npm run test:dev

Módulos

Mecanografiado

TypeScript y Babel están preconfigurados con resolución de módulos personalizados. Esto significa que puede usar importaciones absolutas con espacios de nombres personalizados de forma predeterminada para los siguientes módulos:

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

Por defecto, la ruta ./src/common/css está configurada como una ruta incluida para nuestro cargador SCSS. Esto significa que puede importar cualquiera de los archivos de esta carpeta directamente sin la ruta relativa o absoluta:

 @import 'variables' ;
@import 'colors' ;