NextJs Monorepo Skeleton

▶️ Getting Started

1. Install dependencies

   yarn bootstrap
   

2. initialize git hook with husky

   npx husky install

3. To create a new nextJS application

     nx generate @nx/next:application --name=test-project --no-interactive

4. To create a component

    nx g @nx/next:component <component name> --directory shared/src/components/<component name>

   Note: 📖 If you want to remove apps/projects

   nx g remove <app-name>-e2e
   nx g remove <app-name>

📖 Introduction

This nextjs_skeletin template has a bunch of folders, code examples, and configurations. Feel free to edit or remove them, including this README!

📖 Conventions

Folder Name 👉 Kebab case
Example: folder-name another-folder-name

File Name 👉 Kebab case
Example: folder-name another-folder-name

Variable Name 👉 snake case/ camel case
snake case: variable_name
camel case: variableName

Function Name 👉 camel case
Example: functionName

📁 File Tree

See below the file tree to understand the project structure.

View file tree

Folders and file structure.

.
├── consumer
│   ├── index.d.ts
│   ├── jest.config.ts
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── project.json
│   ├── public
│   │   └── favicon.ico
│   ├── specs
│   │   └── index.spec.tsx
│   ├── src
│   │   └── app
│   │       ├── api
│   │       │   └── hello
│   │       │       └── route.ts
│   │       ├── global.css
│   │       ├── layout.tsx
│   │       ├── page.module.css
│   │       └── page.tsx
│   ├── tsconfig.json
│   └── tsconfig.spec.json
└── owner
    ├── index.d.ts
    ├── jest.config.ts
    ├── next-env.d.ts
    ├── next.config.js
    ├── project.json
    ├── public
    │   └── favicon.ico
    ├── specs
    │   └── index.spec.tsx
    ├── src
    │   └── app
    │       ├── api
    │       │   └── hello
    │       │       └── route.ts
    │       ├── global.css
    │       ├── layout.tsx
    │       ├── page.module.css
    │       └── page.tsx
    ├── tsconfig.json
    └── tsconfig.spec.json

✨ Features

This template features all the latest tools and web development best practices. Some of the tools are listed below 👇

📊 Legend

✅ : Implemented
⌛ : In progress
⏰ : Thinking

🏗️ Build System

Name	Description	status
Nx	Next generation build system with first-class monorepo support	✅

🔥 Framework

Name	Description	status
NextJs	The React framework for the web	✅

💄 Design System and Animations

Name	Description	status
ant design	A fully featured react component library	✅
@tabler/icons-react	Beautiful &consistent icons	✅
Framer motion	A production-ready motion library for React	✅
TanStack Table	Headless UI for building powerful tables & data grids	✅

🏬 Data Fetching

Name	Description	status
TanStack Query	Powerful asynchronous state management	✅
axios	Promise based HTTP client for the browser and node.js	⏰

🏬 State Management and Hooks

Name	Description	status
Typescript	TypeScript is JavaScript with syntax for types.	✅
react-use	TypeScript is JavaScript with syntax for types.	⏰

❄️ Internationalization

Name	Description	status
next-intl	Next.js internationalization (i18n)	✅

🔐 Authetication

Name	Description	status
firebase	Authentication	⌛
Next-auth	Authentication for Next.js	⌛

🏬 Type Checking

Name	Description	status
Typescript	TypeScript is JavaScript with syntax for types.	✅

📉 Linter and Prettier

Name	Description	status
👺 Eslint	Find and fix problems in your JavaScript code	✅
💅 Prettier	Prettier- An opinionated code formatter	✅
💩 lint-staged	Run linters against staged git files and don't let 💩 slip into your code base	✅
🐶 Husky	Husky improves your commits and more 🐶 woof!	✅
📓 Commitlint	Lint commit messages	✅
🔢 standard version	A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits	⏰
Validte branch name	validate git branch name	✅

🚫 Form/validation

Name	Description	status
React hook form	Performant,flexible and extensible forms with easy-to-use validation	✅
Zod	TypeScript-first schema validation with static type inference	✅

🧪 Test

Name	Description	status
jest	A delightful JavaScript Testing Framework with a focus on simplicity	✅
Testing Library	React Testing Library	✅
cypress	Test. Automate. Accelerate.[end-to-end testing]	✅

➕ Additional

Name	Description	status
Partytown	Relocate resource intensive third-party scripts off of the main thread and into a web worker	⏰

📈 Analysis

Name	Description	status
why-did-you-render	Notify you about potentially avoidable re-renders	⏰