NextJS Template - Material Kit (Free Design)

This article presents an open-source NextJS Template provided for free by Creative-Tim on top of a modern UI Kit: Material Design. The project comes with a permissive license, active support and versioning and can be downloaded directly from Github. For newcomers, Next.js is a complete full-stack framework built on top of React.js useful to build static sites, APIs, and even full-stack applications.

NextJS Template - Material Kit

NextJS - Short Introduction

NextJS comes with an impressive set of features, almost ZERO configuration.  A few reasons to use NextJS ar at least play a bit with this framework

  • Built on top of React. If you are a React developer, the learning curve might be shorter
  • Internationalization - A feature heavily used in eCommerce products (not only)
  • SSG, SSR supported by default. No tweaks or hacking required.

Compared to Gatsby, another popular React Framework, NextJS is not tied to GraphQL or other heavy technologies and this aspect speed up the adoption among newcomers.  For more information feel free to access the official website:


NextJS Material Kit

NextJS Material Kit is a Free Material Design Kit made for NextJS, React and Material-UI.

If you like bright and fresh colors, you will love this Free Material Design Kit! It features a huge number of components that can help you create amazing websites.

NextJS Material Kit is built with over 100 individual frontend elements, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS and JSS (inside JS files) files and classes.

Curious minds can build the starters with just a few commands typed in the terminal without leaving this page - the following build instructions are copied from the README file submitted along with the source code.

Step #1 - Clone/download the sources

$ # Clone repo
$ https://github.com/creativetimofficial/nextjs-material-kit.git
$ cd nextjs-material-kit

Step #2 - Install modules (dependencies)

$ # Make sure you are INSIDE the local copy
$ yarn

Step #3 - Start for development

$ # Start the project for development
$ yar start

Once the project is running in the browser, we should see some nice pages styled on top of a Material concept:

NextJS Template Material - Login Page

NextJS Template Material - Team Cards

NextJS Template Material - Product Features

Thanks for reading! For more resources please access:

NextJS Material Kit PRO is a Premium UI Kit made for NextJS, React and Material-UI.

If you like bright and fresh colors, you will love this Premium NextJS Material-UI Kit! It features a huge number of components that can help you create amazing websites.

NextJS Material Kit PRO is built with over 1000 individual frontend elements, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS and JSS files and classes.