Next.js Starter-Kit Boilerplate

Features

• ✨ TypeScript
• 📦 Yarn
• ⚡️ Next.js 13
• ⚛️ React 18
• 💨 Tailwind CSS 3
• 📎 SVG Support
• 🃏 Jest
• 🐙 React Testing Library
• 📖 Storybook
• 📏 ESLint — Find and fix problems in your code, also will auto sort your imports
• 💖 Prettier — Format your code consistently
• 🐶 Husky — Run scripts on your staged files before they are committed
• 🤖 Conventional Commit Lint — Make sure you & your teammates follow conventional commit
• 🌸 React Query
• 🔜 Another cool features will be added soon...
  • 📋 React Hook Form
  • ✅ Yup
  • 🌐 Jotai/Zustand (?)

Getting Started

1. Clone this template using one of the four ways:

1. Use this repository as template

   Disclosure: by using this repository as a template, there will be an attribution on your repository.

   I'll appreciate if you do, so this template can be known by others too 😄

   

2. Using create-next-app

   npx create-next-app -e https://github.com/rizbud/next-boilerplate project-name

3. Using degit

   npx degit rizbud/next-boilerplate YOUR_APP_NAME

4. Deploy it directly to Vercel

   

2. Install dependencies

It is encouraged to use yarn so the husky hooks can work properly.

yarn install

3. Run the development server

You can start the server using this command:

yarn dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx.

4. Run the Storybook

For storybook documentation, please visit Storybook.

You can start the Storybook using this command:

yarn storybook

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

5. Commit your changes

This template uses conventional commits to make sure your commit messages are consistent and readable.

Before commiting your changes, install husky using this command: (Optional - since already installed when running yarn install)

yarn prepare

To commit your changes, you can use this command:

yarn commit

This command will open an interactive CLI to help you write your commit message.

6. Run the test

For testing documentation, please visit Jest and React Testing Library.

You can start the test using this command:

For watch mode:

yarn test

with coverage:

yarn test --coverage

For single run:

yarn test:ci

with coverage:

yarn test:ci --coverage

7. Build your app

You can build your app using this command:

yarn build

8. Run your app

You can run your app using this command:

yarn start