TypeScript Next.js 14 App Router Boilerplate with redux

Welcome to the TypeScript Next.js 14 App Router Boilerplate! This boilerplate is designed to kickstart your Next.js projects with the latest features, including the App Router, TypeScript, Redux, Redux Toolkit, and RTK Query pre-configured out of the box.

🚀 Features

• Next.js 14: Utilize the latest features of Next.js, including the App Router.
• TypeScript: Built-in TypeScript support for type-safe development.
• Redux Toolkit: State management with Redux Toolkit, making it easier to manage and scale your application state.
• RTK Query: Simplified data fetching and caching with RTK-Query.
• Tailwind CSS: Fully integrated with Tailwind CSS for rapid and responsive UI development.
• Zod: Schema validation with Zod for ensuring data integrity.
• Pre-configured ESLint: Enforce code quality and consistency with ESLint.
• Animation: Animation setup with AOS.
• React-hook-form: Built-in React-hook-form setup.
• React-toastify: Built-in React-Toastify setup.

Replace with the name of this npm package and with the desired name of your application.

📖 Scripts

• dev: Start the development server.
• build: Build the application for production.
• start: Start the production server.
• lint: Run ESLint to check for code quality issues.

🏗️ Getting Started

To create a TypeScript Next.js project with redux boilerplate, use the following command:

npx create-nxt4-redux <your-app-name>

Replace <your-app-name> with the desired name of your application.

This will:

1. Clone the boilerplate repository.
2. Create a new directory with <your-app-name>.
3. Remove the .git directory from the cloned repository.
4. Set up your new TypeScript Next.js project with redux.

Boilerplate Repository

The tool clones the repository from GitHub.

Project Structure

The generated project includes:

📦
├─ src
│  ├─ app
│  │  ├─ error.tsx
│  │  ├─ favicon.ico
│  │  ├─ globals.css
│  │  ├─ layout.tsx
│  │  ├─ loading.tsx
│  │  ├─ not-found.tsx
│  │  └─ page.tsx
│  ├─ assets
│  │  └─ index.ts
│  ├─ component
│  │  ├─ Forms
│  │  │  └─ BaseForm.tsx
│  │  └─ Shared
│  │     └─ RootContainer.tsx
│  ├─ config
│  │  └─ index.ts
│  ├─ constant
│  │  ├─ authKey.ts
│  │  └─ role.ts
│  ├─ helpers
│  │  └─ cn.ts
│  ├─ libs
│  │  ├─ api
│  │  │  └─ baseApi.ts
│  │  ├─ features
│  │  │  └─ auth
│  │  │     ├─ authApi.ts
│  │  │     └─ authSlice.ts
│  │  ├─ tags
│  │  │  └─ index.ts
│  │  ├─ hooks.ts
│  │  ├─ store.ts
│  │  └─ StoreProvider.tsx
│  ├─ providers
│  │  └─ AllProviders.tsx
│  ├─ services
│  │  └─ Actions
│  │     ├─ getServerSideData.ts
│  │     └─ tokenAction.ts
│  ├─ types
│  │  ├─ common.ts
│  │  ├─ index.ts
│  │  └─ user.ts
│  ├─ utils
│  │  └─ jwt.ts
│  ├─ validation
│  │  ├─ index.ts
│  │  └─ userValidation.ts
│  └─ middleware.ts
├─ .env.exampl
├─ .gitignore
├─ next.config.mjs
├─ package-lock.json
├─ package.json
├─ potcss.config.mjs
├─ README.md
├─ tailwind.config.ts
├─ tsconfig.json
└─ yarn.lock

©generated by Project Tree Generator

📦 Dependencies

• [email protected]
• react@^18
• react-dom@^18
• @reduxjs/toolkit@^2.2.7
• react-redux@^9.1.2
• react-hook-form@^7.52.2
• redux-persist@^6.0.0
• aos@^2.3.4
• jwt-decode@^4.0.0
• tailwind-merge@^2.5.1
• zod@^3.23.8
• dotenv@^16.4.5
• react-toastify@^10.0.5

🛠️ Dev Dependencies

• @types/aos@^3.0.7
• @types/node@^20
• @types/react@^18
• @types/react-dom@^18
• eslint@^8
• [email protected]
• postcss@^8
• tailwindcss@^3.4.1
• typescript@^5

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or feedback, feel free to reach out via GitHub Issues.

Made with ❤️ by MD. Monir Hoshen, GitHub Profile

nextjs14-with-redux