Next.js Boilerplate by ixartz

This project is a comprehensive boilerplate and starter kit designed for Next.js 16+ using the App Router, Tailwind CSS 4, and TypeScript. It prioritizes developer experience by integrating a wide range of modern tools for testing, linting, authentication, database management, and security.

Key technologies included:

• Framework: Next.js 16+ (App Router)
• Styling: Tailwind CSS 4
• Language: TypeScript
• Authentication: Clerk
• ORM: DrizzleORM (supports PostgreSQL, SQLite, and MySQL)
• Databases: PGlite (local) and Neon (production)
• Testing: Vitest, Testing Library, and Playwright
• Security: Arcjet (Bot detection, Rate limiting, Attack protection)
• Error Monitoring: Sentry
• Logging: LogTape
• Git Hooks: Lefthook and Lint-Staged
• UI/Documentation: Storybook

The project uses next-intl and Crowdin for translations.

To automate translations:

1. Create a project on Crowdin.com and retrieve your Project ID.
2. Create a Personal Access Token in Crowdin (Account Settings > API).
3. Define CROWDIN_PROJECT_ID and CROWDIN_PERSONAL_TOKEN as environment variables in your GitHub Actions.

Localization files will synchronize with Crowdin on every push to the main branch.

The project follows the Conventional Commits specification. Use the interactive CLI to guide your commit process.

Command: npm run commit

Common Types:

• feat: New feature
• fix: Bug fix
• docs: Documentation
• style: Code formatting
• refactor: Code restructuring
• test: Adding/updating tests
• chore: Maintenance tasks

Arcjet provides bot detection and WAF protection.

1. Create an account at arcjet.com.
2. Add your API key to the ARCJET_KEY environment variable.

Security is managed via a central client in src/libs/Arcjet.ts and applied in proxy.ts.

You can visually explore your database using Drizzle Studio.

Command: npm run db:studio (opens https://local.drizzle.studio)

While the project uses PGlite for local development, you should use a remote PostgreSQL provider (like Neon) for production.

To set up a remote database:

1. Create a PostgreSQL database and obtain the connection string.
2. Add the connection string to the DATABASE_URL variable in your .env.production file.

The database structure is defined in ./src/models/Schema.ts. To apply changes:

1. Update the schema file.
2. Generate a migration: npm run db:generate.
3. Apply the migration: npm run db:migrate.

Storybook is used for isolated UI development. Stories should be placed alongside components using *.stories.ts or *.stories.tsx.

• Development mode: npm run storybook (runs at http://localhost:6006)
• Headless test mode: npm run storybook:test

Local Production Build

To test an optimized build locally using an in-memory database: npm run build-local

Production Deployment

1. Ensure DATABASE_URL and CLERK_SECRET_KEY are defined in your environment.
2. Generate the build: npm run build.
3. Start the server: npm run start.

To set up the project locally, clone the repository, install dependencies, and run the development server. The project is pre-configured with a local database using PGlite, so no additional database setup is required for local development.

Requirements:

• Node.js 24+
• npm

git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install
npm run dev

The project uses Vitest for unit testing and Playwright for E2E/Integration testing.

Unit Tests: Run npm run test to execute tests located in *.test.ts or *.test.tsx files.

E2E/Integration Tests: Files use *.integ.ts or *.e2e.ts extensions.

1. Install Playwright (first time only): npx playwright install
2. Run tests: npm run test:e2e