cfatrane / nextjs-boilerplate

WIP: Boilerplate for Next Js. Eslint, Husky, i18n, Prettier, Shadcn, Storybook, Stripe, Tailwind

Boilerplate Next Js 14 WIP

Table of Contents 📋

WIP

• Features
• Project Structure

Features 🛠️

• Clerk : A complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.
• Crowdin : A localization management platform that aims to make the translation process more efficient.
• Husky 🐶 : Automatically lint your commit messages, code, and run tests upon committing or pushing.
• i18n : The process of designing and developing software so it can be adapted for users of different cultures and languages
• Jest : For unit and integration testing
• ESlint : Statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
• Prettier : An opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
• React Hook Form : A library that helps you validate forms in React.
• Shadcn : A collection of beautifully designed, accessible, and customizable React components that you can use to build modern web applications with Next. js.
• Tailwind : A utility-first CSS framework that streamlines web development by providing a set of pre-designed utility classes.
• VSCode : Configuration file and recommended extensions
• Zod : Schema validation with static type inference

Soon ⏱️

• Github Actions : A continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline.
• Storybook : A development environment tool that is used as a playground for UI components. It allows us, the developers, to create and test components in isolation.
• Sentry : For real-time error tracking and monitoring

Getting Started 🤔

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Scripts

dev: "next dev",
build: "next build",
start "next start",
lint "next lint",
lint:fix "next lint --fix",
prepare "husky install",
clean "rm -rf node_modules yarn.lock",

Project Structure 📁

├── .eslintrc.json        # Configuration file for eslint
├── .git                  #
├── .gitignore            #
├── .husky                #
├── .prettierignore       # Configuration file for ignore eslint folders and files
├── .prettierrc           # Prettier configuration
├── .vscode               # VSCode configurations (extensions, settings ...)
├── messages              # Folder for all the translation files of i18n
├── src
│   ├── app               # Main folder
│   ├── assets            # Folder for all the assets
│   ├── components        # Folder for all your components
│   ├── constants         # Folder for all your constants
│   ├── hooks             # Folder for all your personals hooks
│   ├── i18n              # Folder for all the configuration and translations files
│   ├── lib               # The lib folder contains all the utility functions
│   ├── redux             #
│   ├── services          # List of services
│   ├── styles            # List of styles
│   ├── tests             # List of tests
│   ├── types             # List of types
│   └── utils             # List of utils functions
├── tailwind.config.ts    #
└── tsconfig.json         #

Auth Js

WIP

Eslint

WIP

i18n / Translation 🗺️

WIP

Storybook

WIP

Test

Generate a basic Jest configuration file by running the following command npm init jest@latest

This will take you through a series of prompts to setup Jest for your project, including automatically creating a jest.config.ts.

Jest will look for test files with any of the following popular naming conventions:

• Files with .js suffix in __tests__ folders.
• Files with .test.js suffix.
• Files with .spec.js suffix.

The .test.js / .spec.js files (or the __tests__folders) can be located at any depth under the src top level folder.

We recommend to put the test files (or __tests__ folders) next to the code they are testing so that relative imports appear shorter. For example, if App.test.js and App.js are in the same folder, the test only needs to import App from './App' instead of a long relative path. Collocation also helps find tests more quickly in larger projects.

To run test yarn test

VSCode Extensions 💻

Better Comments

The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:

• Alerts
• Queries
• TODOs
• Highlights
• Commented out code can also be styled to make it clear the code shouldn't be there
• Any other comment styles you'd like can be specified in the settings

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

ESLint

Integrates ESLint into VS Code. If you are new to ESLint check the documentation.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

On new folders you might also need to create an .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal with npx eslint --init.

i18n Ally

General Features

• Supports multi-root workspaces
• Supports remote development
• Supports numerous popular frameworks
• Supports linked locale messages
• Uses i18n for the extension itself, of course. Translation List

SonarLint

SonarLint by Sonar is a free IDE extension that empowers you to fix coding issues before they exist. More than a linter, SonarLint detects and highlights issues that can lead to bugs, vulnerabilities, and code smells as you create your code. It offers clear remediation guidance and educational help, so you can fix issues before the code is committed. SonarLint in VS Code supports analysis of JS/TS, Python, PHP, Java, C, C++, C#, Go, and IaC code locally in your IDE.

Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Deployment 🚀

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Learn More 🧠

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Suggestions ☝️

Auth

• Clerk

Components

• shadcn
• MUI
• Next UI
• Ant Design
• Aceternity UI
• Preline UI

Database

• Turso
• Planetscale

State Management

• Redux + Next
• Recoil
• Zustand

Validation

• Joi
• Yup
• Zod