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!

Furthermore, we are using MUI components and theme config to manage its look and feel,

Initial theme configs are available in mui-theme-config as well as Some basic Reusable components, do check it out.

Running The Project

📖 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	⏰