Woohm402 NextJS Template

Woohm402 NextJS Template is a personal boilerplate repository that scaffolds a TypeScript-based Next.js application with Sass CSS Modules, React Query, ESLint/Prettier, Yarn Berry, Husky, and the atomic design pattern.

What is Woohm402 NextJS Template?

Woohm402 NextJS Template is a starter repository created by the developer woohm402, designed to provide a preferred setup for building Next.js applications. The template takes a cloned repository as input and produces a working Next.js development environment with TypeScript, Sass for styling, React Query for server-state management, and code-quality tooling. It runs on the Next.js framework and can be launched with yarn commands.

Key Features

• TypeScript — The template ships with TypeScript for static typing, which the author credits with improving development productivity when writing JavaScript.
• Sass + CSS Modules — Styling is handled by Sass together with CSS Modules, chosen over CSS-in-JS to avoid tight coupling to a specific library and to sidestep class-name convention debates.
• React Query — Server state is isolated from client state using React Query's declarative API with minimal boilerplate; pages without server state can drop the library entirely.
• No client state manager by default — Redux, Recoil, and MobX are deliberately absent; the author recommends using useState, URL query parameters, or in-memory storage such as axios defaults, with Recoil or Redux only added when a real need appears.
• Atomic design pattern — Components are organized using the atomic design methodology, which the author adopted experimentally.
• ESLint & Prettier — ESLint improves TypeScript code quality and Prettier ensures consistent formatting across the project.
• Yarn Berry — Package management uses Yarn Berry as the package manager.
• Husky — Git hooks via Husky are configured to enforce commit conventions.

Who is it for?

• Next.js developers who want a TypeScript base without Tailwind CSS or utility-first styling.
• Developers who prefer separating server and client state and appreciate React Query being pre-wired.
• Developers who like opinionated boilerplates with atomic design as a structural starting point.
• Side-project starters who want linting, formatting, and Git hooks already configured.

What can you do with it?

• Start a Next.js project quickly — Clone the repository, run yarn install && yarn dev, and access the app at http://localhost:3000.
• Maintain consistent code quality — ESLint and Prettier handle linting and formatting out of the box, while Husky encodes commit conventions.
• Build a server-state-driven app — React Query is integrated for declarative data fetching, with guidance on when to add a client-state library.

How does it work?

The template is meant to be cloned directly and run using Yarn: yarn install && yarn dev. According to the repository log, it was created from create-next-app, then enhanced with ESLint, Prettier, Yarn Berry, Husky, Sass, atomic pattern, and React Query, making the final setup reproducible.

FAQ

Does Woohm402 NextJS Template include Tailwind CSS?

No. The template uses Sass with CSS Modules for styling, explicitly avoiding CSS-in-JS and utility-first frameworks like Tailwind.

Why is there no Redux or Recoil pre-installed?

The author intentionally omits client-state managers, reasoning that React Query covers server state and most client state fits in useState or URL query parameters. If a project truly needs one, Recoil or Redux can be manually added.

How do I start a new project from this template?

Clone the repository, run yarn install && yarn dev, then visit http://localhost:3000. The setup assumes Yarn Berry as the package manager.

Can I remove React Query if my page doesn't use server state?

Yes. The author notes that React Query can be removed for pages without server state, since it is only needed for declarative server-state management.

Which styling approach is used?

The template combines Sass with CSS Modules. This approach was chosen to stay closer to native CSS and avoid dependency on a specific CSS-in-JS library.