next-i18n-auth

Next i18n Auth Boilerplate

A complete, production-grade Next.js starter with internationalization, authentication, UI components, testing, and more.

If so, this boilerplate is for you. Fork it, customize it, and accelerate your development with a solid foundation that eliminates repetitive work and allows you to focus on what really matters — building great products.

Vercel License: MIT Built With Next.js GitHub Stars GitHub Forks GitHub Issues GitHub Last Commit

🔥 Preview

next-i18n-auth Preview

Deployment

This project is live and deployed on Vercel! Visit the live demo: Next i18n Auth Boilerplate Live

Features

Quick Start

Prerequisites

Make sure you have the following installed:

Installation

  1. Clone the repository:

    git clone https://github.com/Sayyat/next-i18n-auth.git
cd next-i18n-auth

  2. Install dependencies:

    yarn install

  3. Create a .env file in the root directory and add the following environment variables:

    AUTH_URL=http://127.0.0.1:3001
AUTH_SECRET=<Your Auth Secret>
NEXT_PUBLIC_API_URL=<Your API URL>
API_URL=<Your API URL>
NODE_ENV=development
NEXT_TELEMETRY_DISABLED=1
RAPIDAPI_KEY=<Your RapidAPI key>

  4. Start the development server:

    yarn dev

    The application will be available at http://localhost:3000.

File Structure

You can find the file structure of the project in the File Structure document.

How to Use

Authentication

Localization

Toast Notifications

Zod Validation

Customization

Add New Languages

  1. Add the new language key in i18n/lib/config.ts: To add French (fr), update the languages array as follows:

    export const languages = ["kk", "ru", "en", "fr"] as const;

  2. Generate language files for the new locale: Run smart-i18n or yarn si command to generate the template language files for the newly added language (fr in this case).

  3. Translate the new language files: To translate the language files using RapidAPI, run the following command:

    smart-i18n generate-translations -l fr

    Or use the alias:

    yarn si:trs -l fr

    That’s it! Your new language should now be added to the system.

    Note: See Automation for more details..

Add New Pages

  1. Create a new folder under the app directory, e.g., app/dashboard.
  2. Add a new page.tsx file inside the folder.
  3. Use the existing components for layout and styles.

📚 Tech Stack

Technology Description
Next.js React framework with server-side rendering
Next-Auth Authentication system for Next.js apps
i18next Localization and translation management
gulp A toolkit to automate & enhance your workflow
Tailwind CSS Utility-first CSS framework
shadcn/ui Beautiful prebuilt components
TypeScript Static typing for scalable applications
Zod Type-safe schema validation
@tanstack/react-query Powerful data fetching library
Vitest Fast unit testing framework
Playwright End-to-end browser testing framework
@t3-oss/env-nextjs Type-safe environment variable management for Next.js
React-Toastify Toast notifications

🚀 Running Tests

This project includes a robust testing setup to ensure code quality and application reliability. Below are the details for running different types of tests:

1. Unit and Integration Tests

We use Vitest with React Testing Library to write and run unit and integration tests.

Run Unit/Integration Tests:

  yarn test

Watch Tests:

  yarn test:watch

Coverage Report:

   yarn coverage

2. End-to-End (E2E) Tests

We use Playwright for writing end-to-end tests.

Run E2E Tests:

  yarn test:e2e

Playwright Test Runner UI:

  yarn test:e2e --ui

Notes:

3. Test Setup

Test Directory Structure

Example Test Command:

  yarn test  # Runs all unit and integration tests
  yarn test:e2e  # Runs all E2E tests

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Made with 💜 by Sayat Raykul

If you like this project, please ⭐️ star it on GitHub! It helps me continue building great open-source tools.

📚 Related Projects

This site is open source. Improve this page.