https://github.com/karpolan/nextjs-mui-starter-ts

Starter template for Next.js with App Router + Material UI + TypeScript
https://github.com/karpolan/nextjs-mui-starter-ts

material-design material-ui mui mui-material mui5 muiv5 next next-app next-appdir next-js nextjs nextjs-boilerplate nextjs-starter nextjs-template react reactjs starter

Last synced: about 19 hours ago
JSON representation

Starter template for Next.js with App Router + Material UI + TypeScript

• Host: GitHub
• URL: https://github.com/karpolan/nextjs-mui-starter-ts
• Owner: karpolan
• Created: 2023-08-06T00:36:36.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-11T16:58:16.000Z (4 months ago)
• Last Synced: 2024-09-18T04:03:42.641Z (7 days ago)
• Topics: material-design, material-ui, mui, mui-material, mui5, muiv5, next, next-app, next-appdir, next-js, nextjs, nextjs-boilerplate, nextjs-starter, nextjs-template, react, reactjs, starter
• Language: TypeScript
• Homepage: https://nextjs-mui-starter-ts.vercel.app
• Size: 1000 KB
• Stars: 24
• Watchers: 1
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Starter project for Next.js with App Router + Material UI using TypeScript

Mix of [Create Next App](https://nextjs.org/docs/pages/api-reference/create-next-app) and [MUI](https://mui.com) with set of reusable components and utilities to build professional NextJS application faster.

- [Source Code](https://github.com/karpolan/nextjs-mui-starter-ts)

- [Online Demo](https://nextjs-mui-starter-ts.vercel.app)

_Warning: if your are planning to use **Pages Router** (not **App Router**) then use [this template](https://github.com/karpolan/nextjs-with-pages-mui-starter-ts)_

## How to use

1. Clone or download the repo from: https://github.com/karpolan/nextjs-mui-starter-ts

2. Copy `.env.sample` file into `.env` file

3. Replace `_TITLE_` and `_DESCRIPTION_` in all files with own texts

4. Check and resolve all `// TODO: ` directives

5. Add your own code :)

## Available Scripts

In the project directory, you can run:

### `npm run dev` or `yarn dev`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.

### `npm run lint` or `yarn lint`

Checks the code for errors and missing things

### `npm run format` or `yarn format`

Formats the code according to `./prettierrc.js` config

### `npm test` or `yarn test`

Launches the test runner in the interactive watch mode.


### `npm run build` or `yarn build`

Builds the app for production or local development to the `.next` folder.


## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation]https://nextjs.org/docs/pages/building-your-application/deploying) for more details.