🚀 NextJsLaunchpad

The comprehensive toolkit for developing Next.js projects.

With NextJsLaunchpad, you get

• a robust foundation equipped with essential tools,
• configurations, and best practices to streamline your development workflow.

Say goodbye to setup headaches and hello to consistent code quality. Elevate your Next.js projects with NextJsLaunchpad.

✨ Features

• Next.js 16: The latest Next.js with full Turbopack support for lightning-fast builds and development.

• TypeScript: Enhance your development experience with TypeScript's static typing.

• Tailwind CSS 4: CSS-first configuration with the new @import "tailwindcss" syntax — no more tailwind.config.ts.

• ESLint 10: Modern flat config (eslint.config.mjs) with native Next.js and TypeScript support.

• Prettier: Keep your codebase clean and consistent with automatic code formatting using Prettier.

• Prettier Plugin Tailwindcss: Automatic sorting of tailwind classnames using the official prettier plugin.

• Prettier Plugin Sort Imports: Organize import declarations alphabetically within groups, which can help improve readability when working on larger projects.

• Husky 9: Streamlined pre-commit hooks — no more shell boilerplate in hook files.

• Docker Support: Complete Docker configuration.

  -  Start the application using this Docker command:
  
  docker-compose up
  
  The command will:
  1. Build the application container
  2. Install all dependencies
  3. Start the development server
  4. Make the application available on localhost

• Internationalization (i18n): Built-in support for multiple languages using next-intl v4, making it easy to create multilingual applications with locale-specific routing and translations.

Prerequisites

Node.js ^20.19.0 || >=22.12.0 is required. Verify with:

node --version

Getting Started

Usage

npx create-next-app -e https://github.com/CreoWis/next-js-launchpad

Internationalization (i18n)

NextJsLaunchpad comes with built-in internationalization support using next-intl v4. This integration provides:

• Route-based locale handling with /[locale]/ directory structure
• Easy-to-use translation hooks with useTranslations in server and client components.

Translation files are located in:

content/
  ├── en.json
  ├── fr.json
  └── [other-locales].json

The request configuration is located at src/i18n/request.ts (next-intl v4 convention).

How to add a new language support:

To add a new language, we have to add the language JSON file to the content directory, which is in the root directory, that is our first step.

After that, we have to add the newly added language to the locales array in the navigation.ts file. Below is the content of the navigation.ts file, where we need to add the newly added language to the locales array:

import {defineRouting} from 'next-intl/routing';
import {createNavigation} from 'next-intl/navigation';

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ['en', 'fr', 'newLanguage'], // Add the new language code here

  // Used when no locale matches
  defaultLocale: 'en'
});

export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);

#### Using Strings from Language Files

To use strings from a language file in both **client and server** components, use the `useTranslations` hook.

#### Steps:

1. **Import `useTranslations`:**

   ```javascript
   import { useTranslations } from 'next-intl';

2. Initialize useTranslations with a section:

   const t = useTranslations('Home');

3. Fetch and use translations:

   <h1>{t('welcomeMessage')}</h1>

Playwright E2E Testing

NextJsLaunchpad includes Playwright for robust end-to-end testing. This integration provides:

• Headless and UI Testing: Run tests in both headless mode for automation and UI mode for debugging.
• Cross-Browser Compatibility: Test on Chromium, Firefox, and WebKit.
• API and Component Testing: Supports API calls and frontend component interactions.

Running Playwright Tests

To execute Playwright tests, use:

npm run playwright

Playwright Configuration

Test settings are defined in:

/playwright.config.ts

Test Files

Playwright tests are located in:

/__tests__/e2e/

Vitest Unit & Integration Testing

NextJsLaunchpad includes Vitest for fast and efficient unit and integration testing. This setup provides:

• Lightning-Fast Execution: Runs tests in parallel for speed.
• JSDOM Environment: Simulates a browser-like environment for React components.
• TypeScript Support: Fully compatible with TypeScript for better type safety.
• Mocking & Snapshot Testing: Supports mocking API calls and UI snapshots.

Running Vitest Tests

To execute Vitest tests, use:

npm run vitest

Vitest Configuration

Test settings are defined in:

/vitest.config.mts

Tailwind CSS v4

NextJsLaunchpad uses Tailwind CSS v4 with its new CSS-first configuration approach. No more tailwind.config.ts — all configuration lives in CSS.

Tailwind is imported in src/styles/globals.css:

@import "tailwindcss";

Custom theme values (colors, fonts, etc.) are defined using @theme blocks in CSS:

@theme {
  --color-brand: oklch(0.7 0.2 240);
  --font-sans: "Inter", sans-serif;
}

ESLint 10 Flat Config

NextJsLaunchpad uses ESLint 10 with the new flat config format. Configuration is in eslint.config.mjs:

import nextConfig from 'eslint-config-next/core-web-vitals';
import nextTypescript from 'eslint-config-next/typescript';
import prettierConfig from 'eslint-config-prettier';

export default [
  { ignores: ['.next/**', 'node_modules/**'] },
  ...nextConfig,
  ...nextTypescript,
  prettierConfig,
  { rules: { /* custom rules */ } },
];

Folder Structure

.
├── __tests__
├── lib
├── public
└── src
    ├── app
    └── components
        ├── footer
        └── ui
    ├── config
    ├── constants
    ├── context
    ├── data
    ├── db
    ├── hooks
    ├── i18n
    │   └── request.ts
    ├── modules
    ├── queries
    ├── services
    ├── store
    └── utils
├── styles
├── types

__tests__: This folder contains all 'tests'.

lib: This folder may contain utility functions that can be converted later into packages that are used across multiple applications.

public: Self explanatory.

src/i18n: Contains next-intl v4 configuration. request.ts is the request configuration file that handles locale resolution and message loading.

src/components: This directory contains your UI components. It's further subdivided into ui for generic UI components and shared for components that might be reused across different parts of your application.

Conventions for src/components

src/constants: As the name suggests this folder contains constants.

src/context: The context folder in React JS is a folder that stores all of the context files for the application. Context is a way to pass data through the component tree without having to pass props down manually at every level. This can be useful for data that needs to be accessed by many components, such as the current user or the current state of the application.

src/data: The data folder in React JS is used to store data assets such as JSON files that contain information used in the application. It is similar to the assets folder, but it is specifically for storing data.

src/db: The db folder in React JS is typically used to store database-related files, such as database configuration files, migration scripts, and seed files.

src/hooks: This directory may house custom hooks that are used throughout your application.

Conventions for src/hooks

src/modules: Modules which is also synonymous with 'sections/features' are logical groupings of code that make up the larger pages.

src/queries: This directory may contain GraphQL queries.

src/services: This folder helps separate the concerns of your application by isolating data fetching and manipulation logic from the components that render the UI.

src/store: The store folder in React JS is used to store global state data that is used throughout the application. This data can be anything from the current user's login status to the contents of a shopping cart. The store folder is typically created in the root directory of the project and contains a number of files, including the store itself, actions, and reducers.

src/utils: This directory may contain utility functions that do not make sense to convert into packages later.

styles: As the name suggests, this directory contains the css pages that is responsible for styling.

types: This folder contains TypeScript type definitions.

Conventions

Throughout the project, unless otherwise mentioned, we will be using the following convention:

• folders and files are named in lowercase with words separated by hyphen (kebab-case). For example, my-folder or my-file.
• Functions -> camelCase E.g. filterProductsByType , formatCurrency
• Variables -> camelCase E.g. products, productsFiltered
• Global constants -> all caps UPPERCASE. For example: MAX_VALUE, MIN_VALUE
• Object constants -> Singular, capitalized with const assertion and optionally satisfies type (if there is one).

const ORDER_STATUS = {
    pending: 'pending',
    fulfilled: 'fulfilled',
    error: 'error',
  } as const satisfies OrderStatus;

• component names -> PascalCase E.g. export function Footer() {}
• types should have .d.ts extension. E.g. root.d.ts
• use arrow functions wherever possible.
• ui folder can contain granular level components like button, dialog, input etc which can be used to build other components.
• use given folders for various kinds of files. E.g. types should reside in types folder

NOTE: Check granular level conventions below for overiding rules (if any). If there are cases where industry standards over-ride the rules mentioned above, please feel free to use them. For example convention for naming hooks.

Conventions for src/components

• ui components will go inside the ui folder
• each component will be a folder of its own. Sub-components, if any will reside in the same folder. Each such folder will have index.ts file which will export all components. E.g. export { Footer as default } from './footer';
• separate folder for routes. E.g. about-us route will have a folder by the same name inside component folder which will have other components inside it.

Example: take a look at the footer component.

Conventions for src/hooks

• camelCase beginning with the word use e.g. useFetchData: A generic fetching hook for making HTTP requests to a specified endpoint.

🤝 Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Please adhere to this project's code of conduct.

🙏 Support Us

This is an OSS project by team CreoWis. We need all the support we can get. Please give this project a ⭐️ to encourage and show that you liked it.

If you found the project helpful, consider supporting us with a coffee.

Acknowledgements

• Next.JS
• TailwindCSS

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Rajarshi 💻	Joy Poddar 💻	Chhakuli Zingare 💻	Jaya Kumar 💻	Tapas Adhikary 👀	Koustov 🤔	Parthib Sarkar 💻
Prachi Sahu 💻

This project follows the all-contributors specification. Contributions of any kind welcome!