DEV Community 👩‍💻👨‍💻

Cover image for NextJS Material Kit - Free TypeScript Template
Sm0ke
Sm0ke

Posted on • Originally published at admin-dashboards.com

NextJS Material Kit - Free TypeScript Template

Hello Coders!

This article presents an open-source NextJS Template recently updated to TypeScript, and up-to-date dependencies (React v18, NextJS v12.3). The product, based on the permissive (MIT) license, can be used in commercial project or eLearning activities. For newcomers, NextJS is a powerful React Framework used to code blazing fast full-stack apps with speed. Thanks for reading!

NextJS Material Kit - Login card (free React Template)


✨ How to use it

Being an open-source project, NextJS Material Kit can be downloaded from Github and compiled locally using classic tools like NPM or Yarn. As stated on the project README, the sources were tested with Node v16.x, v18.x and might be a good idea to use them in order to avoid runtime or compilation surprises.

👉 Step #1 - Clone the repo

$ git clone https://github.com/app-generator/nextjs-material-kit
$ cd nextjs-material-kit
Enter fullscreen mode Exit fullscreen mode

👉 Step #2 - Install modules

$ yarn 
// OR
$ npm i
Enter fullscreen mode Exit fullscreen mode

👉 Step #3 - Start the app

$ yarn start
// OR
$ npm run start
Enter fullscreen mode Exit fullscreen mode

👉 Step #4 - Static Export

$ yarn export
// OR
$ npm run export
Enter fullscreen mode Exit fullscreen mode

The static site is generate in the out directory.


✨ Product Highlights

The UI is built with over 100 individual frontend elements, giving you the freedom of choosing and combining. All components can take variations in color, which developers can easily modify using SASS and JSS (inside JS files) files and classes.

  • ✅ Modern stack: React / NextJS
  • TypeScript
  • ✅ One-Click Deploy for Vercel & Netlify
  • ✅ Active versioning

Example Pages - If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages.

NextJS Material Kit - Carousel (free React Template)


NextJS Material Kit - UI Components (free React Template)


NextJS Material Kit - Team Cards (free React Template)


Thanks for reading! For more resources and support, please access:

Top comments (4)

Collapse
 
crearesite profile image
WebsiteMarket

great design.

Collapse
 
sm0ke profile image
Sm0ke Author

🚀🚀

Collapse
 
uithemes profile image
ui-themes

Next is cool.

Collapse
 
sm0ke profile image
Sm0ke Author

🚀🚀

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠