Next, TypeScript, Material UI quality checking project

Template decription:

• React 17
• NextJS / TypeScript
• MUI v5
• Testing
• I18n
• Alias
• Redux toolkit
• ESLint
• Prettier

• Next, TypeScript, Material UI quality checking project - Template decription:
  • Deploy your own
  • How to use
  • Scripts
    • build
    • dev
    • format
    • lint
    • start
    • test
    • type-check
    • quality
  • Accessibility
    • @axe-core/react

Deploy your own

Deploy the example using Vercel:

How to use

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

npx create-next-app --example https://github.com/delpikye-v/next-ts-mui-template
# or
yarn create next-app --example https://github.com/delpikye-v/next-ts-mui-template

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.