Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

Overview

TypeScript NextJs Mui Styled Components Netlify

nextjs-ts-mui5-scss-storybook-starter 📕

Next.js + TypeScript + Material UI v5 + Sass + Storybook starter 📕 with linting & prettier pre-configured

Made by M Ridho Anshory

Getting Started

Clone this template using one of these ways:

  1. Use this repository as template Disclosure: by using this repository as a template, there will be an attribution on your repository.

    I'll appreciate if you do, so this template can be known by others too 😄

    Use as template

  2. Using create-next-app

    npx create-next-app -e https://github.com/RidhoAnshory/nextjs-ts-mui5-scss-storybook-starter your-project-name

Run the repository

First, install the dependencies:

npm install
#
yarn

Second, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

You might also like...

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Dec 28, 2022

👉 Built my first React JS project "ToDo" webapp using some Features and Icons from Material UI.

# Getting Started with Create React App This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ## Avai

Dec 15, 2021

Worldwide-covid-statistics - covid-19 tracker developed using Reactjs, Axios , chartjs, material icons

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022

Bdc-walkthrough - An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way.

Bdc-walkthrough - An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way.

Material walk-through library An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way. Show Demo Prerequis

Dec 14, 2022

Material Design Web Components

Material Web IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release. Material Web is Google’s UI toolkit for bui

Dec 31, 2022

Material Design Lite for Ember.js Apps

Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember = 1.11.0 Installation # ember-cli 0.2.3 ember install

Dec 17, 2021

Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mar 1, 2022

A PhotoShot Plugin to get material you colors easily.

material-you 可以快速获取符合 material-you 配色的 PhotoShop 插件。 参考自 Material Theme Builder 安装 初次安装 从 release 中下载压缩包并解压。打开 Photoshop ,运行 文件-脚本-浏览 ,选择安装包中的 安装脚本.js

Jun 17, 2022

A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

Jun 3, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...

Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful template ⚡️ Table of contents Getting started Paths & Files Useful depend

Alexandre Gossard 40 Jan 7, 2023
A beautiful and easy in hand blog made by Next.js Material-ui

Material-blog A beautiful and easy in hand blog made by Next.js Material-ui! Deploy your own Deploy the example using Vercel: Usage Install node_modul

Willie Xu 1 Mar 3, 2022
A recipe website built for my girlfriend who loves cooking, using Sass, JavaScript, Parcel, and HTML

Forkify-App Live Link Project Introduction Forkify is a recipe web app using the Forkify API to allow users to search, view, modify, bookmark and add

JungFF 14 Sep 29, 2022
Parse/Next Monorepo Starter

Parse/Next Monorepo Starter All in one template monorepo to build and deploy apps faster than ever with modern technologies. Technologies Parse Server

Antoine Cormouls 7 Oct 27, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
Wall Covering Calculator and Material Procurement Portal

Wall-Pro MPP --Wall Covering Calculator and Material Procurement Portal-- Table of Contents: Links Description UserStory DevelopmentTeam Installation

Mike Bussert 4 Jul 7, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 22 Apr 20, 2022