Intermediate Next.js test (Intermediate)

Sample questions

5 sample questions from the Intermediate Next.js test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. Which of the following is the correct approach to implement rate limiting in Next.js using middleware?

   1. Use middleware with a counter stored in a Redis cache to track and enforce rate limits.
   2. Use a route handler to store rate limit counters in a database and return 429 responses.
   3. Use a server action to handle rate limiting by checking the request frequency before processing.
   4. Use a server component to store and manage rate limit counters in the application state.

   Answer: A. Use middleware with a counter stored in a Redis cache to track and enforce rate limits.

   Next.js middleware is suitable for rate limiting because it runs before rendering and can inspect requests. Storing the rate limit counter in a Redis cache ensures that the state is preserved across requests. Using middleware with `NextResponse` to respond with status codes like 429 (Too Many Requests) is the correct approach. Other options are incorrect because using a server component, server action, or a route handler is not appropriate for rate limiting as they are not designed to handle this task efficiently.

2. What will happen to a component in the App Router if it is not marked with 'use client' at the top of the file?

   1. The component will not render at all and will throw an error.
   2. The component will render on the server, and its code will not be sent to the browser.
   3. The component will render on both the server and the client simultaneously.
   4. The component will render on the client, and its code will be sent to the browser.

   Answer: B. The component will render on the server, and its code will not be sent to the browser.

   In the App Router, every component is a Server Component by default, meaning it is rendered on the server and its code is never sent to the browser. If the component needs to run on the client, it must be marked with 'use client' at the top of the file.

3. You are building a Server Component in the App Router that needs to fetch data from an external API and ensure the data is always fresh. Which of the following approaches should you use?

   1. Use `getServerSideProps` to fetch the data and pass it as props to the Server Component.
   2. Use the `fetch` function directly within the Server Component and set `cache: 'no-store'` to ensure the data is always fresh.
   3. Use the `useSWR` hook inside the Server Component to fetch and cache the data on the client side.
   4. Use `useEffect` inside the Server Component to fetch the data and update the UI dynamically.

   Answer: B. Use the `fetch` function directly within the Server Component and set `cache: 'no-store'` to ensure the data is always fresh.

   In Next.js App Router, Server Components can directly use the `fetch` function for data fetching. To ensure the data is always fresh and not cached, the `cache: 'no-store'` option should be used. Other options are incorrect because `getServerSideProps` is not supported in the App Router, `useEffect` is not applicable in Server Components, and `useSWR` is a client-side hook and cannot be used in Server Components.

4. You are building a RESTful API in a Next.js project and need to create a route handler for fetching user data by ID. Which of the following correctly describes the implementation?

   1. The file should be named `app/api/users/[id]/route.ts` and export a `GET` function that processes the request and returns a `Response` object.
   2. The file should be named `app/api/users/[id]/route.ts` and export a `POST` function that processes the request and returns a `Response` object.
   3. The file should be named `app/api/users/[id]/route.ts` and export a `GET` function that processes the request and returns a `JSON` object.
   4. The file should be named `app/api/users/id/route.ts` and export a `GET` function that processes the request and returns a `Response` object.

   Answer: A. The file should be named `app/api/users/[id]/route.ts` and export a `GET` function that processes the request and returns a `Response` object.

   In Next.js, route handlers are created by placing a `route.ts` file inside the `app/api/` directory. For dynamic routes, the file should be named with square brackets around the dynamic segment, such as `[id]`. The `GET` function is used to handle GET requests, and it must return a `Response` object.

5. What happens to a component in the App Router if it does not have the 'use client' directive at the top of the file?

   1. The component will be a Server Component by default, and its code will not be sent to the browser.
   2. The component will be a Client Component by default, and its code will not be sent to the browser.
   3. The component will be a Server Component by default, and its code will be sent to the browser.
   4. The component will be a Client Component by default, and its code will be sent to the browser.

   Answer: A. The component will be a Server Component by default, and its code will not be sent to the browser.

   In the App Router, every component is a Server Component by default. This means that the code for the component is rendered on the server and is not sent to the browser. The 'use client' directive is required only if the component needs to be a Client Component, which is necessary for state, effects, event handlers, or browser APIs.