Next Essential - An Essential Template to get started with Next.js application with all the essentials included...
- ✨ Framework: Next.js - React-based framework for building web applications
- 🚀 Styling: Tailwind CSS - Utility-first CSS framework
- 💻 Language: TypeScript - Typed superset of JavaScript
- 🧹 Linting and Formatting: Biome.js - Fast and customizable linter and formatter
- 🎨 Themes: Next Themes - Easy theme management for Next.js
- 💄 Icons: Lucide-React - Beautiful open-source icons
- ⚙️ Build: GitHub Actions - Automated workflows for CI/CD
- 🛠 Commit: Husky - Git hooks made easy
- 📦 Package: pnpm - Fast, disk space efficient package manager
The folder structure of the project is organized as follows:
/project-root
/src
/app # Contains all routes and pages
/components # Contains reusable components
/primitives # Contains primitive components or base UI elements
/hooks # Custom hooks for the app
/interfaces # TypeScript interfaces for the app
/lib # Helper functions, utilities, and configuration files
/providers # Context and providers for app-wide state management
/public # Static assets and images
/styles # Global styles, TailwindCSS theme configuration
/tests # Unit and integration tests
/config # Project configuration files (e.g., Next.js config, environment settings)
next.config.js # Next.js settings
tailwind.config.js # Tailwind CSS configuration
.gitignore # Specifies files to ignore in Git
README.md # Project documentation
LICENSE # License information
package.json # Project metadata and dependencies
/app
: Contains all routes and pages of the Next.js application. Each file corresponds to a specific page or route./components
: Contains reusable, presentational components that can be shared across different parts of the application./primitives
: Contains basic UI elements or primitive components such as buttons, inputs, etc., that are used in building more complex components./hooks
: Contains custom React hooks for specific logic or functionality that can be reused across the app./interfaces
: Contains TypeScript interfaces that define types for the app's data models or API responses./lib
: Includes helper functions, utilities, and configuration files like API clients, authentication methods, etc./providers
: Contains context providers for managing global state across the application.
To get started with the Next Essential project, follow these steps:
- Clone the repository
- Install dependencies:
npm install
orpnpm install
oryarn install
- Run the development server:
npm run dev
orpnpm run dev
oryarn run dev
- Open http://localhost:3000 in your browser
- Keep reusable components in the
components/
folder - Place primitive components like buttons, inputs, etc., in the
primitives/
folder - Store hooks in the
hooks/
folder to make them easily reusable - Define all interfaces in the
interfaces/
folder - Store helpers, utilities, and configurations in the
lib/
folder - Use context and global state management with the
providers/
folder - Follow the TypeScript and Biome.js linting rules
- Use Husky pre-commit hooks to ensure code quality
- Modify the theme in
tailwind.config.js
- Adjust global styles in
app/globals.css
- Configure Next.js settings in
next.config.js
Contributions are always welcome! Please follow these steps:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name
- Make your changes and commit them:
git commit -m 'Add some feature'
- Push to the branch:
git push origin feature/your-feature-name
- Submit a pull request
For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License. See the LICENSE file for more information.