Next.js + Tailwind CSS + TypeScript Boilerplate

A comprehensive starter pack featuring Next.js, TypeScript, Tailwind CSS, and Shadcn UI. Additionally, AI-powered Storybook and Next-Intl Internationalization expansions are included but kept separate to maintain the core boilerplate structure—use them as needed.

Features

• Next.js 14 with App Router
  Leverage the latest App Router for enhanced routing capabilities.

• React 18
  Enjoy concurrent features and the latest improvements in React 18.

• TypeScript
  Strongly typed development with TypeScript integration.

• Shadcn/UI Ready
  Seamlessly integrated Shadcn UI for a cohesive design system.

• Tailwind CSS 3
  Utility-first CSS framework with the latest version of Tailwind.

• Pre-built Components
  A set of pre-designed components ready to use.

• Jest
  Unit and integration testing with Jest, configured and ready to go.

• Absolute Import and Path Alias
  Simplify imports with the @/ prefix, making your code cleaner and more maintainable.

• ESLint
  Identify and fix issues in your codebase; also auto-sorts imports.

• Prettier
  Automatic code formatting to maintain a consistent code style.

• Husky & Lint Staged
  Ensure code quality by running linting and formatting checks before commits.

• Conventional Commit Lint
  Enforce conventional commit messages for better versioning.

• Release Please GitHub Actions
  Automate your release process by linting code on pull requests.

• Automatic Branch and Issue Autolink
  Automatically create branches when issues are assigned and auto-link them in pull requests.

• Snippets
  A collection of useful code snippets for faster development.

• Site Map
  Automatically generate a sitemap.xml for improved SEO.

• Reset Css
  Fill the control on CSS when using semantic HTML.

• Expansion Pack
  Additional features and tools to extend your project as needed. expansion pack

  • Storybook generator(AI powered)
  • Next-Intl Internationalization

Getting Started

1. Clone this template using one of the following methods:

• Use this repository as a template
  You can start your project by using this repository as a template.

  Disclosure: By using this repository as a template, an attribution link will appear on your repository. Your acknowledgment would be greatly appreciated as it helps others discover this template too! 😄

• Using create-next-app
  Create a new Next.js app with this template using the following command:

  pnpm create next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

2. Install dependencies

pnpm makes husky work properly and decrease your dependecies storage hell

pnpm install

3. Run the development server

pnpm dev

Access http://localhost:3000 in your browser to view. Begin editing the page by making changes to src/app/page.tsx.

4. Change Default Configurations

There are some things you need to change including title, urls, favicons, etc.

Find all comments with !CONFIGURE, then follow the guide.

Don't forget to change the package name in package.json

Expansion Pack 📦

This boilerplate has expansion pack.

Know bugs wait to solve

• husky commits can not found npx when only try to commit on SoucreTree only, using terminal is fine