1.1.0 • Published 1 year ago

nextv14-mui-mini-kit v1.1.0

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

nextv14-mui-mini-kit

A template for kickstarting Next.js 14(App Router) projects with Material-UI (MUI) as the CSS framework, Redux Toolkit for global state management, and TypeScript for type safety.

Getting Started

Prerequisites

Before you begin, make sure you have Node.js ( >=18.x) and npm installed on your machine.

Installation

Create a new Next.js project using this template with the following command:

npx nextv14-mui-mini-kit <project-name>

Replace <project-name> with the desired name for your project.

Usage

Once the installation is complete, navigate to the project directory:

cd <project-name>

Start the development server:

npm run dev

Visit http://localhost:3000 in your browser to see your app in action.

Page Should look like this:

  • Dark mode(default): dark mode page
  • Light mode: light mode page

Features

  • Next.js 14: Utilizing the latest version of Next.js for a performant and efficient development experience.
  • Material-UI (MUI): A popular React UI framework for building responsive and aesthetically pleasing user interfaces.
  • Redux Toolkit: State management made easy with Redux Toolkit, providing a predictable and efficient way to manage global state.
  • TypeScript: Enhance your development process with TypeScript for static typing and improved code quality

Folder Structure

|-- /src
|   |-- /app          # Next.js pages
|   |-- /client     # React components
|      |-- /components # General component
|         |-- /sections    # specific page components
|         |-- /shared      # common components  
|      |-- /redux-state          # Redux setup and slices
|      |-- /theme         # customized mui theme files
|-- /public             # Public assets

Customization

Feel free to customize the template according to your project requirements. Modify the components, Redux slices, and theme styles as needed.

Additional Documentation

For more detailed information on the Next.js, MUI, and Redux Toolkit, refer to their official documentation:

Acknowledgments

Special thanks to the Next.js, MUI, and Redux Toolkit communities for their fantastic tools and resources.