ts nextjs tailwind starter

Next.js + Tailwind CSS + TypeScript Starter y Boilerplate

? ts-nextjs-tailwind-starter

Next.js + Tailwind CSS + TypeScript Starter lleno de funciones de desarrollo útiles.

Hecho por Theodorus Clarence

Características

Este repositorio es? batería llena de:

• ⚡️ Next.js 14 con enrutador de aplicaciones
• ⚛️ React 18
• Mecanografiado
• ? Tailwind CSS 3 - Configurado con variables CSS para extender el color primario
• ? Componentes preconstruidos: componentes que se adaptarán automáticamente con el color de su marca, consulte aquí para la demostración
• ? Jest: configurado para pruebas unitarias
• ? Alias de importación y ruta absoluta: importar componentes usando @/ prefijo
• ? ESLINT - Encuentre y solucione problemas en su código, también ordenará automáticamente sus importaciones
• ? Más bonito: formatear su código de manera consistente
• ? Husky & Lint organizado: ejecute scripts en sus archivos escenificados antes de que se comprometan
• ? Lints convencional de confirmación: asegúrese de que usted y sus compañeros de equipo sigan la comisión convencional
• ⏰ Libere por favor: genere su CangeLog activando el flujo de trabajo release-please
• ? Acciones de Github - Lint su código en PR
• ? Rama automática y emisión Autolink: la rama se creará automáticamente en la asignación de problemas y se vincula automáticamente en PR
• Fragmentos: una colección de fragmentos útiles
• ? Abra la función de ayuda de gráfico: un gráfico abierto impresionante generado usando OG, bifurca e implementa!
• ? Mapa del sitio: generar automáticamente SitEmap.xml
• ? Paquete de expansión: instale fácilmente bibliotecas comunes, componentes adicionales y configuraciones.

¿Vea los detalles de la función y ChangeLog? para más.

También puede consultar todos los detalles y demostraciones en mi publicación de blog:

• Iniciador único para maximizar los proyectos de Next.js & Tailwind CSS

Empezando

1. Clon esta plantilla usando una de las tres formas

1. Use este repositorio como plantilla

   Divulgación: al usar este repositorio como plantilla, habrá una atribución en su repositorio.

   Agradeceré si lo haces, ¿así que esta plantilla también puede ser conocida por otros?

   

2. Usando create-next-app

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   Si aún desea usar el directorio de páginas ( no se mantiene activamente ) puede usar este comando

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. Usando degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Desplegar en VERCEL

2. Instalar dependencias

Se alienta a usar PNPM para que los ganchos Husky puedan funcionar correctamente.

pnpm install

3. Ejecute el servidor de desarrollo

Puede iniciar el servidor usando este comando:

pnpm dev

Abra http: // localhost: 3000 con su navegador para ver el resultado. Puede comenzar a editar la página modificando src/pages/index.tsx .

4. Cambiar los valores predeterminados

Hay algunas cosas que debe cambiar, incluyendo título, URL, favicones, etc.

Encuentre todos los comentarios con! StarterConf, luego siga la guía.

No olvide cambiar el nombre del paquete en paquete.json

5. Construir la convención de mensajes

Este arranque está utilizando confirmaciones convencionales, es obligatorio usarlo para confirmar cambios.

Proyectos que utilizan ts-nextjs-tailwind-starter

• theodorusclarence.com (fuente)
• Notiolink (fuente)
• NextJS + Materia UI + TypeScript

¿Estás usando este iniciador? Agregue su página (y repose) al final de la lista a través de una solicitud de extracción. ?

Paquete de expansión?

Este arranque ahora está equipado con un paquete de expansión.

Puede agregar fácilmente la expansión como React Hook Form + Components, Storybook y más solo usar una sola línea de comandos.

CleanShot.2021-12-04.at.18.54.07 trimmed.mp4

Consulte el repositorio del paquete de expansión para los comandos

Actualización del enrutador de aplicaciones

Debido a la actualización del enrutador de aplicaciones, el paquete de expansión está actualmente desactualizado . Se actualizará en el futuro. Todavía puede usarlos copiando y pegando los archivos.