Skip to content
This repository has been archived by the owner on Oct 15, 2021. It is now read-only.

Next.js example with TypeScript, Material UI, ESlint, Prettier, and Jest

Notifications You must be signed in to change notification settings

MileTwo/nextjs-typescript-material-ui-eslint-jest

Repository files navigation

🚨 Archived and moved to MileTwo/nextjs-ts 🚨

We archived this repository for two reasons

  • This repo is used in our CLI tool for creating new nextjs projects create-m2-app. In our version <0.4.x we had three templates in this one repository: next, next-prisma-rest, and nest-prisma-graphql. We wanted to rename it but if we did so it would cause breaking changes to the users using create-m2-app with older versions.
  • This repository serving as three repo's was challenging us to maintain and review PR's. We realized this wasn't going to be easy to maintain and share the load for open source maintanance. So we decided to split them up. In the split up version 0.4.0 of create-m2-app split out the prisma-rest and the prisma-graphql repositories. In version 0.5.0 we archived the repository you are viewing and moved it to nextjs-ts.

Huge shoutout to all the contributors and maintainers on this project! You should still see yourself on our all-contributors list in the new repository

Next.js TypeScript Material UI quality checking project

All Contributors

Includes TypeScript, Material UI, ESLint, Jest, and React Testing Library

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
# or
yarn create next-app --example https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest

Deploy it to the cloud with Vercel (Documentation).

Scripts

All scripts can be run by prefixing with npm run, for example npm run build

build

Builds the production application in the .next folder.

npm run build

dev

Starts the application in development mode with hot-code reloading, error reporting, and more:

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

npm run dev -- -p 4000

format

Runs ESLint and Prettier auto-formatting.

npm run format

lint

Runs ESLint static code analysis based on your .eslintrc configuration

npm run lint

start

Starts the application in production mode. The application should be compiled with npm run build first.

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

npm run start -p 4000

test

Runs Jest unit tests to validate changes between commits

npm run test

type-check

Runs TypeScript compiler to validate there are no type errors between commits

npm run type-check

quality

Runs type-check, lint, and test to make an better developer experience catching preventable quality errors.

npm run quality

Accessibility

@axe-core/react

Runs in development environment and logs accessibility error results in dev tools console. Tool implementation is in pages/_app.tsx.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


John Fay

💻 📖 🚧 🚇

Ren Estep

💻 ️️️️♿️ 🚧

Steve Gray

💻 📖 🚧

Jenny Olsen

📖

Brandin Canfield

🚧 🚇 🛡️

Lucas Guiss Gusmão

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Releases

No releases published

Packages

No packages published