Next.js TS Tailwind Starter

This is a Next.js project bootstrapped with create-next-app and packed with useful stuff to support your development workflow.

Features

• TypeScript
• Tailwind CSS with pre-configured colors
• Basic components following atomic design concept
• Storybook
• Access thousands of icons using unplugin-icons
• Make sure commit messages meet conventional commit format using commitlint
• Run formatters and linters within Git hooks using lefthook
• Manage release using standard-version

Getting Started

Bootstrap the project using create-next-app:

# Use yarn because the starter kit already has yarn.lock
yarn create next-app -e https://github.com/surdarmaputra/next-ts-tailwind-starter

or use degit:

# Clone the repo
npx degit https://github.com/surdarmaputra/next-ts-tailwind-starter project_dir_name

# then install dependencies
cd project_dir_name
yarn

Prepare Git hook:

# Install hooks
npx lefthook install

# Test lefthook
npx lefthook run pre-commit

Run the development server:

# Run the app server
yarn dev

# Run the storybook server
yarn storybook

Open http://localhost:3000 to see the result.

Open http://localhost:6006 to explore the storybook.

The page and storybook auto-update as you edit the file.

API Routes

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Project Convention

• There's a pre-configured color palette that includes primary, success, danger, warning and dark colors (configured in tailwind.config.js). To reduce complexity in the app, it's recommended to use these colors instead of all colors provided by tailwind.
• Components are grouped using the atomic-design principle.
• Commit and PR titles use the conventional commit format.

References

• Next.js documentation - learn about Next.js features and API.
• Next.js deployment documentation - how to deploy Next.js.
• Deploy to Vercel - create a new deployment on Vercel.
• Install icon set - install desired icon set using unplugin-icons.
• Icons browser - browse available icons.