🚀 Create a New Next.js Project Instantly

You can scaffold a new project using:

1npx create-next-core-base
2

🚀 Next Base - Next.js Starter Project

Welcome to Next Base, a powerful and developer-friendly boilerplate to jump start your Next.js projects with everything already configured — just clone and start building.

Built with Next.js 13+, this starter includes all the essentials for a modern frontend workflow using TypeScript, TailwindCSS, Redux, Axios, and more.

---

🧰 Tech Stack

• ⚡ Next.js – React framework for production
• 🔷 TypeScript – Strongly typed JavaScript
• 🌈 Tailwind CSS – Utility-first CSS framework
• 🌙 next-themes – Seamless dark/light mode support with Tailwind
• 🧠 Redux Toolkit – Modern state management with Redux
• 🌐 Axios – Promise-based HTTP client
• 📄 dotenv – Environment variable management
• 🔧 ESLint + Prettier – Linting and code formatting
• 🐶 Husky + Lint-Staged – Git hooks and pre-commit checks
• 🔍 next-seo – SEO utilities for Next.js
• 🧃 React Toastify – Notifications and toasts
• 🎨 React Icons – Popular icons as React components

---

📁 Folder Structure

1
2public/
3├── images/
4└── screenshots/                   # add for seo
5
6src/
7├── app/                           # App routes, layouts, and route handlers (App Router)
8│   ├── layout.tsx                 # Root shared layout (e.g. header, footer, theme)
9│   ├── page.tsx                   # Home page ("/")
10│   ├── about/
11│   │   └── page.tsx               # About page
12│   ├── contact/
13│   │   ├── page.tsx               # Contact page
14│   ├── dashboard/                # Protected area with its own layout
15│   │   ├── layout.tsx            # Dashboard layout (e.g. sidebar)
16│   │   ├── page.tsx              # Dashboard landing page
17│   │   └── settings/
18│   │       ├── page.tsx          # Settings page
19│   │       ├── error.tsx         # Error boundary for this section
20│   │       └── not-found.tsx     # Custom 404 page only for this section
21│   ├── api/                      # API routes using Next.js route handlers
22│   │   ├── auth/
23│   │   │   ├── login/route.ts    # Login API route
24│   │   │   └── register/route.ts # Register API route
25│   │   └── user/
26│   │       └── route.ts          # User data API route
27
28├── assets/                       # add fonts and logo and icon here
29│   ├── fonts/
30│   └── icons/
31
32├── components/                   # Reusable UI components
33│   ├── ui/                       # Buttons, inputs, forms, etc.
34│   ├── layout/                   # Header, Footer, Sidebar, etc.
35│   └── shared/                   # Shared components like Card, Avatar, Badge
36
37├── features/                     # Feature-based folder structure
38│   ├── auth/
39│   │   ├── components/           # Auth-specific UI (e.g. LoginForm)
40│   │   ├── hooks/                # Auth-specific custom hooks
41│   │   ├── services/             # Auth API logic (e.g. login, register)
42│   │   ├── types.ts              # Auth-related TypeScript types
43│   │   └── validation.ts         # Form validation schema for auth
44│   └── blog/                     # Blog feature module
45
46├── hooks/                        # Global reusable custom React hooks
47
48├── lib/                          # Low-level libraries and utilities
49│   ├── base/                     # Axios requests base
50│   │   ├── delete/
51│   │   ├── get/
52│   │   ├── patch/
53│   │   ├── post/
54│   │   └── put/
55│   └── requestHelpers/           # helper functions
56
57├── store/                        # Global state management
58│   ├── index.ts                  # store file
59│   ├── provider.tsx              # create provider in file for next 15 "use client"
60│   └── slice/                    # folder for create slices
61
62├── services/                     # External API interaction logic
63│   └── userService.ts            # User-related API functions
64
65├── types/                        # Global TypeScript types and interfaces
66│   ├── api.d.ts                  # API-specific types
67│   └── common.d.ts               # Shared/common types
68
69├── utils/                        # General utility functions (e.g. formatPhone, validateEmail)
70
71├── constants/                    # Constant values (e.g. roles, messages, routes)
72│   ├── roles.ts
73│   ├── messages.ts
74│   └── routes.ts
75
76
77├── styles/                       # Global CSS/Tailwind styles
78│   ├── globals.css               # Global styles (e.g. resets, base styles)
79│   └── tailwind.css              # Tailwind imports and customization

---

✨ Features

• ✅ Pre configured and ready to use out of the box
• 📦 Feature-based architecture
• 🎯 SEO optimized with next-seo
• 📊 Responsive design with Tailwind
• 🧼 Linting, formatting, and commit quality enforced
• 🧃 Integrated toast system for UX feedback
• 🔌 Global axios instance with interceptors
• 🔁 Redux Toolkit with devtools enabled
• 🧠 Custom hook setup ready (e.g. useAxios, useDebounce)
• 🧱 Scalable for large apps or startups

---

🛠 Getting Started

Clone the repository and install dependencies:

1git clone https://github.com/alihoushngi/Next-Base.git
2cd next-base
3npm install
4npm run dev
5

🔭 Roadmap

• Add built-in Auth support 🔐
• Add dark mode switch 🌙
• Add unit & integration test samples 🧪
• Add i18n & multilingual setup 🌍
• Generate static pages (SSG) for SEO-critical content 📈

---

👨‍💻 Author

Ali Hooshangi – Frontend Developer
📫 aliihooshangi@gmail.com 🔗 linkedin.com/in/alihoushangi
💻 github.com/alihoushngi 🛠 github.com/alihoushngi/Next-Base-CLI

---

“Skip setup. Start building.” ✨
⭐ If you like this project, give it a star!