Next.js TypeScript Material UI quality checking project

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

• App startup
  • SQLite
  • Postgres
• Using Prisma
  • Adding a table to your database
  • Creating migrations
  • Seeding sample data
  • Using prisma client to perform database actions
• Scripts
  • generate
  • migrate
  • deploy
  • reset
  • seed
  • studio
  • prisma
  • build
  • dev
  • format
  • lint
  • start
  • test
  • type-check
  • quality
• Accessibility

App startup

Choose how to start your development server based on your database configuration below.

SQLite

Ensure you have a .env file with a DATABASE_URL variable set to file

DATABASE_URL="file:./dev.db"

First time starting your app make sure to run prisma then start your app.

npm run prisma && npm run dev

Postgres

If you're coming from running npx create-m2-app you should have a docker-compose.yml, and a Dockerfile.dev that will help you get your db up and running quickly.

Start up your postgres db:

docker-compose up

Then run prisma and start your development server

 npm run prisma && npm run dev

npm run prisma will do a few things for us:

• Format your prisma/schema.prisma file (prisma format) | prisma format documentation
• Keeps your prisma/schema.prisma file in sync with your database by auto generating migrations when needed (npm run migrate) | prisma migration documentation
• Seed your database with (npm run seed) | prisma seeding documentation

Using Prisma

Prisma helps app developers build faster and make fewer errors with an open source ORM for PostgreSQL, MySQL and SQLite. | Source

Adding a table to your database

Adding a table is as easy as adding a model to your schema.prisma file, followed by creating a migration. For a tutorial on this visit the prisma schema documentation.

Creating migrations

Once you've made the appropriate changes to your schema.prisma file you can auto generate a migration using

npm run migrate

This will generate a new folder under prisma/migrations with a SQL file outlining the changes to be reflected to your database and also generate new TypeScript code for prisma client usage.

To learn more visit the prisma migration documentation or the prisma generate documentation.

Seeding sample data

To seed your database, using prisma client, add in sample data in the prisma/seed.ts file.

To learn more visit the prisma seeding documentation.

Using prisma client to perform database actions

Using the prisma client you can do the various actions required to build applications utilizing a database.

To learn more visit working with the prisma client.

Scripts

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

generate

See the prisma generate documentation.

npm run generate

migrate

See the prisma migration documentation.

npm run migrate

deploy

To apply pending migrations to development, staging, or testing environments, run the migrate deploy command as part of your CI/CD pipeline | Source.

npm run deploy

reset

When you want to reset your database to a clean slate, this clears all migrations and re-runs the migration list, then seeds the database. For more visit prisma migrate reset.

npm run reset

seed

Runs the prisma/seed.ts script to seed your database. See the prisma seeding documentation.

npm run seed

studio

Allows you to interact with and manage your data interactively. For more visit prisma studio.

npm run studio

prisma

An aggregate command used to format your schema file, check for differences from schema to db, generate a prisma client, and seed your database.

npm run prisma

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.