Next.js Starter

Launch your projects quickly with this Next.js starter kit, which includes a carefully selected suite of tools to enhance the development lifecycle.

What is this repo?

This is a Next.js project bootstrapped with create-next-app. This repository is equipped with a suite of opinionated tools to streamline the development, testing, and deployment phases of your application.

These tools are selected to enhance the foundational create-next-app setup. For example, the base homepage is broken down into components based on the Atomic Design method, and each of these components is represented in Storybook for easier development and testing. Read more about the included tools in the Opinionated Tools Included section.

It's important to note that this setup does not include project-specific tooling such as authentication or database integration, as those choices depend heavily on the individual project requirements.

Table Of Contents

• Opinionated Tools Included
• Getting Started
• Learn More
• Deploy on Vercel

Opinionated Tools Included

• PNPM: A fast, disk space-efficient package manager.
• Turbopack Provides a fast and flexible development experience for apps of any size using incremental behavior and adaptable bundling strategies.
• Storybook: Integrated directly into the project for building UI components in isolation.
• Jest: Setup for unit and snapshot testing to ensure code reliability.
• Playwright: Configured for end-to-end testing, providing automated testing capabilities across various browsers.
• GitHub Actions: Automated workflows for Storybook, Jest, and Playwright to ensure that your builds are tested before deployment.
• t3-env: Validate and transform your environment variables with the full power of Zod.
• Plop: A micro-generator to help you maintain code standards and speed up repetitive tasks.
• Atomic Design: Methodology included for organizing components effectively.
• ESLint: Linting rules to ensure code consistency and quality.
• Prettier: Code formatting rules to ensure code consistency and quality.
• Git Hooks (using Husky): Ensures code standards and runs tests pre-commit and pre-push.
  • Commitlint: Ensures commit messages meet the conventional commits format.
  • Lint-staged: Lints and formats staged files before committing using the project's ESLint and Prettier rules.

Getting Started

First, make sure your system has the PNPM package manager installed. If not, please refer to the installation guide.

Then, clone this repository:

pnpm install

Then, run the development server:

pnpm 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.

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!

Deploy on Vercel

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.