This is codebase for a Next.js 14.2.5 app with TypeScript support, Tailwind , Pretteir and ESLint configured.
- Clone the repository
- Navigate to the project directory
- Install the dependencies:
npm install
npm run dev
This will start the server on http://localhost:3000. Open your browser and navigate to this URL to view the app.
- Typescript 5.0.4
- Next 14.2.5
- Zustand
- Radix UI
- Eslint
- Jest
- Husky
- Prettier
- Tailwind
- Standard Folder structure with NextJS 14 App Directory
- Prettier
- Radix UI Components usage
- Eslint
- Style lint
- Jest setup
- Husky configuration with Pre-commit hooks to enforce fixing of lint , prettier and style lint issues
- Base Style Configurations with IMS theme and Next Fonts
- Nextjs 14 App Directory based Routing
- Folders for Helpers, Data, constant, utility and config
- Categorized assets under Public folder
- Basic Dockerfile
- Tailwind setup
All components inside the app directory are React Server Components (RSC) by default.
Client Components enable you to add client-side interactivity to your application. The "use client" directive can be used to make a component client side.
It is recommend using Server Components (default in the app directory) until you have a need to use a Client Component.
| What do you need to do? | Server Component | Client Component |
|---|---|---|
| Fetch data | ✅ | |
| Access backend resources (directly) | ✅ | ❌ |
| Keep sensitive information on the server (access tokens, API keys, etc) | ✅ | ❌ |
| Keep large dependencies on the server / Reduce client-side JavaScript | ✅ | ❌ |
| Add interactivity and event listeners (onClick(), onChange(), etc) | ❌ | ✅ |
| Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc) | ❌ | ✅ |
| Use browser-only APIs | ❌ | ✅ |
| Use custom hooks that depend on state, effects, or browser-only APIs | ❌ | ✅ |
| Use React Class components | ❌ | ✅ |