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'.

Practice

1. What is the main purpose of schema definition in a Next.js project?

easy

A. To manage server-side rendering

B. To describe the shape and rules of your data

C. To style the user interface components

D. To handle routing between pages

Solution

1. Step 1: Understand schema definition role

   Schema definition is about specifying how data should look and behave.

2. Step 2: Identify its main use in Next.js

   It helps validate data to catch errors early before using it in the app.

3. Final Answer:

   To describe the shape and rules of your data -> Option B

4. Quick Check:

   Schema = Data shape and rules [OK]

Hint: Schema defines data shape and validation rules [OK]

Common Mistakes:

• Confusing schema with UI styling
• Thinking schema manages routing
• Assuming schema handles rendering

2. Which of the following is the correct way to define a simple string schema using the zod library in Next.js?

easy

A. const schema = z.string();

B. const schema = z.string;

C. const schema = z.String();

D. const schema = new z.string();

Solution

1. Step 1: Recall zod syntax for string schema

   In zod, string schema is created by calling z.string() as a function.

2. Step 2: Check each option's syntax

   const schema = z.string(); uses z.string() correctly. Others miss parentheses or use wrong casing or new keyword.

3. Final Answer:

   const schema = z.string(); -> Option A

4. Quick Check:

   z.string() is correct syntax [OK]

Hint: Use parentheses to call z.string() function [OK]

Common Mistakes:

• Omitting parentheses after z.string
• Using uppercase 'String' instead of 'string'
• Using 'new' keyword incorrectly

3. Given this schema definition using zod:

const userSchema = z.object({
  name: z.string(),
  age: z.number().min(18)
});
const result = userSchema.safeParse({ name: "Alice", age: 16 });
console.log(result.success);

What will be logged to the console?

medium

A. true

B. Throws an error

C. false

D. undefined

Solution

1. Step 1: Understand schema rules

   The schema requires 'name' as string and 'age' as number at least 18.

2. Step 2: Check input data against schema

   Input has age 16, which is less than minimum 18, so validation fails.

3. Final Answer:

   false -> Option C

4. Quick Check:

   Validation fails because age < 18 [OK]

Hint: Check min() constraints carefully in validation [OK]

Common Mistakes:

• Assuming validation passes despite age < 18
• Confusing safeParse result with direct parse
• Expecting an error instead of false success

4. Identify the error in this Next.js schema definition using zod:

const productSchema = z.object({
  id: z.number,
  title: z.string(),
  price: z.number()
});

medium

A. Missing comma after 'title' property

B. Schema object should be an array

C. Using z.string() incorrectly

D. Missing parentheses after z.number for 'id'

Solution

1. Step 1: Check each property schema syntax

   'id' uses z.number without parentheses, which is incorrect syntax.

2. Step 2: Verify other properties and object structure

   Other properties are correct; object schema is correctly defined as an object, not array.

3. Final Answer:

   Missing parentheses after z.number for 'id' -> Option D

4. Quick Check:

   z.number() needs parentheses [OK]

Hint: Always call zod types as functions with () [OK]

Common Mistakes:

• Forgetting parentheses after z.number or z.string
• Thinking schema must be an array
• Missing commas between properties

5. You want to define a schema for a user profile in Next.js using zod where the 'email' field is optional but if present must be a valid email string. Which schema definition is correct?

hard

A. const userProfileSchema = z.object({ email: z.string().email().optional() });

B. const userProfileSchema = z.object({ email: z.optional(z.string().email) });

C. const userProfileSchema = z.object({ email: z.string().optional().email() });

D. const userProfileSchema = z.object({ email: z.string().email() || undefined });

Solution

1. Step 1: Understand optional email schema in zod

   To make a field optional but validate if present, use .optional() after .email().

2. Step 2: Check each option's method chaining

   const userProfileSchema = z.object({ email: z.string().email().optional() }); correctly chains z.string().email().optional(). const userProfileSchema = z.object({ email: z.optional(z.string().email) }); uses z.optional incorrectly. const userProfileSchema = z.object({ email: z.string().optional().email() }); calls optional before email, which breaks validation. const userProfileSchema = z.object({ email: z.string().email() || undefined }); uses invalid syntax.

3. Final Answer:

   const userProfileSchema = z.object({ email: z.string().email().optional() }); -> Option A

4. Quick Check:

   Use .optional() after .email() for optional validated fields [OK]

Hint: Chain .optional() after .email() for optional email fields [OK]

Common Mistakes:

• Placing .optional() before .email()
• Using z.optional() wrapper incorrectly
• Trying to use || undefined for optional