Skip to content
/ next-template Public template

Boilerplate of Next.js project with Lint, TypeScript, Sass (SCSS), Tailwind, NextUI, Framer Motion, React Hook Form, Zod, SWR, Vitest, Storybook, CI/CD, Git Hooks (Lefthook) and more.

Notifications You must be signed in to change notification settings

wiyco/next-template

Repository files navigation

next-template

This project was created by npx create-next-app@latest command.

Next.js framework starter repository.

Docs

Development

First, you must install packages.

npm i

Packages

  1. clsx & tailwind-merge
  2. next-themes
  3. framer-motion
  4. swr
  5. react-hook-form
  6. zod
  7. vitest
  8. storybook

1. clsx & tailwind-merge

By using these two packages, you can concatenate class names and prevent duplication in Tailwind.

Note

The script is located in src/utils/cn.ts.

For applying color themes.

This package supports light mode and dark mode by default.

Animations.

4. swr

Useful libraries for client-side (means: use client) fetching.

It's foolish to handle form control without using this library.

Important

@hookform/resolvers required to use Zod for form validation. (already included in the package)

6. zod

The use cases are endless, from server-side type validation to client-side form validation.

This package is used for testing (such as unit tests).

Important

To perform UI testing, you need to configure the @testing-library/jest-dom package and set up Vitest config.

Use for visual testing of UI.

Useful for automatic docs generation of components, testing of theme colors, and testing with various viewports.


🐢

About

Boilerplate of Next.js project with Lint, TypeScript, Sass (SCSS), Tailwind, NextUI, Framer Motion, React Hook Form, Zod, SWR, Vitest, Storybook, CI/CD, Git Hooks (Lefthook) and more.

Resources

Stars

Watchers

Forks