Next js Boilerplate
v3.60.5
Boilerplate and Starter para Next.js con APP Router, Tailwind CSS y TypeScript ⚡️ Priorizar la experiencia del desarrollador primero: Next.js, TypeScript, Eslint, Prettier, Husky, Lint-Diced, Vitest (Reemplazar la Jest), Testing Library, Playwright, ComnLint, VScode, Tailwind CSS, Authentication with Clerk, DataBee With DrazStAn SQLite y MySQL), monitoreo de errores con centinela, registro con Pino.js y administración de registros, monitoreo como código, libro de cuentos, varios idiomas (i18n), seguro con Arcjet (detección de bots, limitación de tarifas, protección de ataque, etc.) y más.
Clone este proyecto y úselo para crear su propio proyecto Next.js. Puede consultar la demostración en vivo en Next.js Boilerplate, que incluye un sistema de autenticación que funciona.
 |  |   |
 |  | |
 |  | |
| Agregue su logotipo aquí |
Demo en vivo: Next.js Boilerplate
| Inscribirse | Iniciar sesión |
|---|---|
 | |
Experiencia del desarrollador primero, estructura de código extremadamente flexible y solo mantenga lo que necesita:
@ prefixCaracterística incorporada de Next.js:
Ejecute el siguiente comando en su entorno local:
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm installPara su información, todas las dependencias se actualizan cada mes.
Luego, puede ejecutar el proyecto localmente en modo de desarrollo con la recarga en vivo ejecutando:
npm run devAbra http: // localhost: 3000 con su navegador favorito para ver su proyecto.
Para comenzar, deberá crear una cuenta de Secretario en Secret.com y crear una nueva aplicación en el tablero del Secretario. Una vez que haya hecho eso, copie los valores NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY y CLERK_SECRET_KEY y agréguelos al archivo .env.local (no rastreado por git):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_keyAhora tiene un sistema de autenticación completamente funcional con Next.js, incluidas características como Registrar, Iniciar sesión, Iniciar sesión, Olvidé la contraseña, Restablecer contraseña, actualizar el perfil, actualizar la contraseña, actualizar el correo electrónico, Eliminar cuenta y más.
El proyecto utiliza Ripsedsormorm, un ORM de tipo seguro que es compatible con las bases de datos PostgreSQL, SQLite y MySQL. Por defecto, el proyecto está configurado para trabajar sin problemas con PostgreSQL, y usted tiene la flexibilidad de elegir cualquier proveedor de base de datos PostgreSQL de su elección.
Para la traducción, el proyecto usa next-intl combinado con Crowdin. Como desarrollador, solo necesita ocuparse de la versión en inglés (u otro idioma predeterminado). Las traducciones para otros idiomas son generadas y manejadas automáticamente por Crowdin. Puede usar Crowdin para colaborar con su equipo de traducción o traducir los mensajes usted mismo con la ayuda de la traducción automática.
Para configurar la traducción (i18n), cree una cuenta en Crowlin.com y cree un nuevo proyecto. En el proyecto recién creado, podrá encontrar la identificación del proyecto. También deberá crear un nuevo token de acceso personal yendo a Configuración de la cuenta> API. Luego, en sus acciones de GitHub, debe definir las siguientes variables de entorno: CROWDIN_PROJECT_ID y CROWDIN_PERSONAL_TOKEN .
Después de definir las variables de entorno en sus acciones de GitHub, sus archivos de localización se sincronizarán con Crowdin cada vez que presione una nueva compromiso con la rama main .
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ ├── utils # Utilities folder
│ └── validations # Validation schemas
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Puede configurar fácilmente la próxima boilerplate JS buscando todo el proyecto para FIXME: para hacer personalizaciones rápidas. Estos son algunos de los archivos más importantes para personalizar:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png y public/favicon-32x32.png : su sitio web Faviconsrc/utils/AppConfig.ts : archivo de configuraciónsrc/templates/BaseTemplate.tsx : tema predeterminadonext.config.mjs : Next.js Configuration.env : variables de entorno predeterminadasTiene acceso completo al código fuente para una mayor personalización. El código proporcionado es solo un ejemplo para ayudarlo a comenzar su proyecto. El cielo es el límite.
Para modificar el esquema de la base de datos en el proyecto, puede actualizar el archivo de esquema ubicado en ./src/models/Schema.ts . Este archivo define la estructura de las tablas de su base de datos utilizando la biblioteca de rizos ORM.
Después de hacer cambios en el esquema, genere una migración ejecutando el siguiente comando:
npm run db:generateEsto creará un archivo de migración que refleje sus cambios de esquema. La migración se aplica automáticamente durante la siguiente interacción de la base de datos, por lo que no es necesario ejecutarla manualmente o reiniciar el servidor Next.js.
El proyecto sigue la especificación de comodidades convencionales, lo que significa que todos los mensajes de confirmación deben estar formateados en consecuencia. Para ayudarlo a escribir mensajes de confirmación, el proyecto usa Commitizen, una CLI interactiva que lo guía a través del proceso de confirmación. Para usarlo, ejecute el siguiente comando:
npm run commit Uno de los beneficios del uso de compromisos convencionales es la capacidad de generar automáticamente un archivo CHANGELOG . También nos permite determinar automáticamente el próximo número de versión en función de los tipos de confirmaciones que se incluyen en una versión.
Todas las pruebas unitarias se encuentran junto con el código fuente en el mismo directorio, lo que las hace más fáciles de encontrar. El proyecto utiliza la biblioteca de pruebas Vitest y React para pruebas unitarias. Puede ejecutar las pruebas con el siguiente comando:
npm run testEl proyecto utiliza el dramaturgo para la integración y las pruebas de extremo a extremo (E2E). Puede ejecutar las pruebas con los siguientes comandos:
npx playwright install # Only for the first time in a new environment
npm run test:e2e En el entorno local, las pruebas visuales están deshabilitadas y el terminal mostrará el mensaje [percy] Percy is not running, disabling snapshots. . Por defecto, las pruebas visuales solo se ejecutan en acciones de GitHub.
La carpeta del enrutador de aplicaciones es compatible con el tiempo de ejecución de borde. Puede habilitarlo agregando las siguientes líneas src/app/layouts.tsx :
export const runtime = 'edge' ; Para su información, la migración de la base de datos no es compatible con el tiempo de ejecución de borde. Por lo tanto, debe deshabilitar la migración automática en src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;Después de deshabilitarlo, debe ejecutar la migración manualmente con:
npm run db:migrateTambién debe ejecutar el comando cada vez que desee actualizar el esquema de la base de datos.
Durante el proceso de compilación, las migraciones de bases de datos se ejecutan automáticamente, por lo que no hay necesidad de ejecutarlas manualmente. Sin embargo, debe definir DATABASE_URL en sus variables de entorno.
Luego, puede generar una construcción de producción con:
$ npm run buildGenera una construcción de producción optimizada de la caldera. Para probar la construcción generada, ejecute:
$ npm run start También debe definir las variables de entorno CLERK_SECRET_KEY usando su propia clave.
Este comando inicia un servidor local utilizando la compilación de producción. Ahora puede abrir http: // localhost: 3000 en su navegador preferido para ver el resultado.
El proyecto usa centinela para monitorear los errores. En el entorno de desarrollo, no se necesita una configuración adicional: Next.js Boilerplate está preconfigurada para usar Sentry y Spotlight (centinela para el desarrollo). Todos los errores se enviarán automáticamente a su instancia local de Spotlight, lo que le permitirá experimentar Sentry localmente.
Para el entorno de producción, necesitará crear una cuenta Sentry y un nuevo proyecto. Luego, en next.config.mjs , debe actualizar los atributos de org y project en la función withSentryConfig . Además, agregue su Sentry DSN a sentry.client.config.ts , sentry.edge.config.ts y sentry.server.config.ts .
Next.js Boilerplate se basa en CodeCov para la solución de informes de cobertura de código. Para habilitar CODECOV, cree una cuenta CodeCoV y conecte a su cuenta GitHub. Sus repositorios deben aparecer en su tablero Codecov. Seleccione el repositorio deseado y copie el token. En acciones de GitHub, defina la variable de entorno CODECOV_TOKEN y pegue el token.
Asegúrese de crear CODECOV_TOKEN como un secreto de GitHub Actions, no lo pegue directamente en su código fuente.
El proyecto usa Pino.js para registrar. En el entorno de desarrollo, los registros se muestran en la consola de forma predeterminada.
Para la producción, el proyecto ya está integrado con una mejor pila para administrar y consultar sus registros utilizando SQL. Para usar Better Stack, debe crear una mejor cuenta de pila y crear una nueva fuente: vaya a su mejor tablero de registros de pila> Fuentes> Conecte la fuente. Luego, debe dar un nombre a su fuente y seleccionar Node.js como plataforma.
Después de crear la fuente, podrá ver y copiar su token de origen. En sus variables de entorno, pegue el token en la variable LOGTAIL_SOURCE_TOKEN . Ahora, todos los registros serán enviados e ingeridos automáticamente por Better Stack.
El proyecto usa Checkly para garantizar que su entorno de producción esté siempre en funcionamiento. A intervalos regulares, Checkly ejecuta las pruebas que terminan con *.check.e2e.ts Extension y le notifica si alguna de las pruebas fallan. Además, tiene la flexibilidad de ejecutar pruebas de múltiples ubicaciones para garantizar que su aplicación esté disponible en todo el mundo.
Para usar Checkly, primero debe crear una cuenta en su sitio web. Después de crear una cuenta, genere una nueva tecla API en el tablero de control y configure la variable de entorno CHECKLY_API_KEY en acciones de GitHub. Además, deberá definir el CHECKLY_ACCOUNT_ID , que también se puede encontrar en su tablero de control en Configuración del usuario> General.
Para completar la configuración, actualice el archivo checkly.config.ts con su propia dirección de correo electrónico y URL de producción.
El proyecto utiliza ArcJet, un producto de seguridad como código que incluye varias características que se pueden usar individualmente o combinadas para proporcionar defensa en profundidad para su sitio.
Para configurar ArcJet, cree una cuenta gratuita y obtenga su clave API. Luego agréguelo a la variable de entorno ARCJET_KEY .
ArcJet está configurado con dos características principales: detección de bot y el escudo Arcjet WAF:
ArcJet está configurado con un cliente central en src/libs/Arcjet.ts que incluye las reglas de WAF SHIELD. Las reglas adicionales se configuran en src/app/[locale]/layout.tsx según el tipo de página.
Next.js Boilerplate incluye un analizador de paquete incorporado. Se puede usar para analizar el tamaño de sus paquetes de JavaScript. Para comenzar, ejecute el siguiente comando:
npm run build-statsAl ejecutar el comando, abrirá automáticamente una nueva ventana del navegador con los resultados.
El proyecto ya está configurado con Rizzle Studio para explorar la base de datos. Puede ejecutar el siguiente comando para abrir el estudio de la base de datos:
npm run db:studioLuego, puede abrir https://local.drizzle.studio con su navegador favorito para explorar su base de datos.
Si es usuario de VSCode, puede tener una mejor integración con VScode instalando la extensión sugerida en .vscode/extension.json . El código de inicio presenta la configuración para una integración perfecta con VScode. La configuración de depuración también se proporciona para la experiencia de depuración frontend y backend.
Con los complementos instalados en su Vscode, Eslint y Prettier pueden corregir automáticamente el código y mostrar los errores. Lo mismo se aplica a las pruebas: puede instalar la extensión VSCode Vitest para ejecutar automáticamente sus pruebas, y también muestra la cobertura de código en contexto.
Consejos Pro: si necesita un proyecto de verificación de tipo ancho con TypeScript, puede ejecutar una compilación con CMD + Shift + B en Mac.
Todos son bienvenidos a contribuir a este proyecto. No dude en abrir un problema si tiene alguna pregunta o encontrar un error. Totalmente abierto a sugerencias y mejoras.
Licenciado bajo la licencia MIT, Copyright © 2024
Vea la licencia para más información.
| | |
| | |
| | |
| Agregue su logotipo aquí |
Hecho con ♥ por createSignsguru
¿Busca una placa personalizada para comenzar su proyecto? Me alegraría discutir cómo puedo ayudarlo a construir uno. ¡No dude en comunicarse en cualquier momento en [email protected]!
