NextJS Material Kit - Free TypeScript Template
Tags: nextjs, opensource
Published: 2022-09-15 13:47:06

---
title: NextJS Material Kit - Free TypeScript Template
published: true
description: Open-Source NextJS Starter built with TypeScript support, one-click deployment for Netlify and MIT License
tags: nextjs, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1vdzzwambzcrz02ii8x.jpg
canonical_url: https://www.admin-dashboards.com/nextjs-material-kit-typescript-x8s/
---
Hello Coders!

This article presents an open-source [NextJS Template](https://github.com/app-generator/nextjs-material-kit) 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](https://nextjs-material-kit.appseed-srv1.com/) - LIVE demo
- 👉 [NextJS Material Kit](https://github.com/app-generator/nextjs-material-kit) - source code
  
![NextJS Material Kit - Login card (free React Template) ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auskew35boyyi5gam4lu.png)

---

## ✨ 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

```bash
$ git clone https://github.com/app-generator/nextjs-material-kit
$ cd nextjs-material-kit
```

---

> 👉 **Step #2** - Install modules

```bash
$ yarn 
// OR
$ npm i
```

---

> 👉 **Step #3** - Start the app

```bash
$ yarn start
// OR
$ npm run start
```

---

> 👉 **Step #4** - Static Export

```bash
$ yarn export
// OR
$ npm run export
```

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)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h3dfwycky50gnexfqwz.png)

---

![NextJS Material Kit - UI Components (free React Template)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vd2yuyucu03fcmvppf2.png)

---

![NextJS Material Kit - Team Cards (free React Template)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww9qkoo3dg6qunf09k23.png)
 
---

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

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and `React`
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products