Schema definition in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Prisma client from '@prisma/client'.

NextJS

import { [1] } from '@prisma/client';

Drag options to blanks, or click blank then click option'

APrismaClient

BcreateSchema

CdefineSchema

Dschema

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not exist in '@prisma/client'.

Trying to import schema creation functions directly from '@prisma/client'.

The PrismaClient is imported from '@prisma/client' to interact with the database schema.

2fill in blank

medium

Complete the code to define a Next.js API route handler using the new App Router.

NextJS

export async function [1](request) {
  return new Response('Hello from API');
}

Drag options to blanks, or click blank then click option'

AgetServerSideProps

BapiHandler

CGET

DhandleRequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using Next.js pages API style like getServerSideProps.

Using lowercase function names for HTTP methods.

In Next.js App Router, API routes export HTTP method functions like GET to handle requests.

3fill in blank

hard

Fix the error in the Prisma schema model definition by completing the field type.

NextJS

model User {
  id    Int    @id @default(autoincrement())
  name  [1]
}

Drag options to blanks, or click blank then click option'

Astring

BText

CString?

DString

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'string' which is invalid in Prisma schema.

Using 'Text' which is not a Prisma scalar type.

Prisma schema uses String (capital S) for string fields, not lowercase or other types.

4fill in blank

hard

Fill both blanks to create a Prisma schema model with an optional email field.

NextJS

model Profile {
  id    Int     @id @default(autoincrement())
  email [1] @unique [2]
}

Drag options to blanks, or click blank then click option'

AString?

BString

C@optional

D@default(null)

Attempts:

3 left

💡 Hint

Common Mistakes

Using String without question mark for optional field.

Using @optional which is not a Prisma attribute.

The field type String? marks the field optional, and @default(null) sets its default to null.

5fill in blank

hard

Fill all three blanks to define a Next.js API route that returns JSON with a status code.

NextJS

export async function [1](request) {
  return new Response(JSON.stringify({ message: 'Success' }), {
    status: [2],
    headers: { 'Content-Type': [3] }
  });
}

Drag options to blanks, or click blank then click option'

AGET

B200

C'application/json'

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase function names for HTTP methods.

Using wrong status codes or missing quotes around content type.

The API route exports a GET function, returns status 200, and sets content type to 'application/json'.