NextJS-App-Router-All-In-One

Next14 + App router boilerplate

How to use

• Framework: NextJS14(Using App Router)
• Compiler: SWC
• Styling: styled-component
• Testing tool: Jest + React Testing Library
• Code generator: PlopJS
• CI / CD: Github Actions + Husky

Install yarn

npm i -g yarn

Getting Started

Dev

$ yarn dev

Storybook

$ yarn storybook

Test

$ yarn test

Code generator

You can generate code with Plopjs.

You can decide whether a component will be server-side or client-side, along with test code.

• Api route
• Component (ssr available)
• Pages and layouts (ssr available)

$ yarn g

CI

Pre commit by husky

You can check detail here

Pre push by husky

You can check detail here

On pull request by github actions (with cache available)

You can check detail here

Folder Structure

.
├── .github # GitHub Actions workflows and configurations
├── .husky # Husky configurations for Git hooks
├── .storybook # Storybook configurations and stories
├── generator # Directory for code generation templates and configurations
│   ├── template # Templates used by PlopJS for generating code
│   └── plopfile.mjs # PlopJS configuration file for defining generators
├── public # Static files served directly by the server
├── src
│   ├── app # NextJS App Router configurations and source files
│   │   └── api # API route handlers for server-side functionality
│   ├── assets # Static assets like images, fonts, etc.
│   ├── components # Reusable React components
│   ├── constant # Constants used throughout the application
│   ├── hooks # Custom React hooks
│   ├── libs # Library files and utilities
│   ├── provider # Context providers for global state management
│   ├── stores # State management stores (e.g., Redux, Zustand)
│   ├── styles # Global and component-specific styles
│   ├── types # TypeScript type definitions
│   └── utils # Utility functions and helpers
├── .eslintrc.json # ESLint configuration file for linting JavaScript/TypeScript
├── .example.env # Example environment variables file
├── .gitignore # Specifies files and directories to be ignored by Git
├── .prettierignore # Specifies files and directories to be ignored by Prettier
├── .prettierrc # Prettier configuration file for code formatting
├── .swcrc # SWC configuration file for JavaScript/TypeScript compilation
├── additional.d.ts # Additional TypeScript type definitions
├── jest.config.ts # Jest configuration file for testing
├── jest.setup.ts # Setup file for configuring Jest and testing environment
├── next.config.mjs # Next.js configuration file
├── package.json # Project dependencies and scripts
├── README.md # Project documentation and instructions
├── tsconfig.json # TypeScript configuration file
└── yarn.lock # Lockfile for Yarn dependencies

Todo

• CI (Github actions + Husky)
• Set folder structure
• Jest(with server component)
• Storybook(with server component)
• Generator
• GraphQL