WorksheetsAdvanced - Initial Module Evaluation
Total questions: 24
Worksheet time: 24mins
When should a developer use the 'useEffect' hook in a Next.js application?
To fetch data on the server-side during page rendering.
To perform side effects in function components.
To define custom server-side routes.
To handle client-side form validations.
What does SSR stand for in the context of Next.js?
You can use fetch with async/await in (a)
What is the purpose of the 'getServerSideProps' function in Next.js?
To fetch data at build time and pass it as props to the page component.
To handle client-side form submissions.
To define server-side routes for API calls.
To create dynamic routes based on user input.
What is the recommended way to define dynamic routes in a Next.js application?
By creating separate route configuration files
By modifying the .env file with dynamic routes
Can be created by wrapping a folder's name in square brackets ([slug])
By using regular expressions for route matching
How do you configure routing in a Next.js application?
By using the React Router library
By creating a custom JavaScript function for routing
By defining routes in the app directory using folders & page.tsx file
By modifying the .env file
Next.JS offers us some ways to navigate between routes, what component allows us to do this?
Nav
Pages are (a) by default but can be set to a (b) .
Abigail is working on a project using Next.JS and wants to enhance the user experience by pre-rendering loading indicators. Which special Next.JS file allows her to achieve this?
_app.tsx
loading.tsx
pre-render.tsx
layout.tsx
Oliver is building a website and wants to add interactive user interface components. Which components should he use to write an interactive user interface that can be rendered on the client at request time?
Server Components
Client Components
Layout Components
How can Abigail use Route Groups in Next.js to organize her route segments and project files without affecting the URL path structure?
By adding prefixes to the route paths in the 'pages' directory.
By creating a folder and its name by placing it in parentheses (folder name)
By using a separate 'routes' directory for organizing route segments and project files.
By creating separate Next.js projects for each route segment and project file.
Which components allow you to build a user interface that can be rendered and optionally cached on the server?
Server Components
Client Components
React Components
What type of component is most suitable for fetching data in a web application?
Client Component
Server Component
Data can be revalidated on-demand by path ( (a) ) or by cache tag ( (b) ) inside a Route Handler or a Server Action
What type of component is best suited for adding interactivity and event listeners in a web application?
Client Component
Server Component
Both static and dynamic metadata through generateMetadata are only supported in (a) Components.
What directive is necessary to add at the top of a file to use Client Components?
"use server"
"useClient"
"use client"
"use react"
What type of component is best suited to use custom hooks that depend on state, effects, or browser-only APIs?
Client Component
Server Component
A (a) file is required to make a route segment publicly accessible.
To create a Server Action by defining it inside an asynchronous function, what directive should we add at the top of the function body?
"use client"
"use server"
"apply server"
"use action"
How can a developer implement client-side routing in a Next.js application?
By using the 'Link' component from the 'next/link' module.
By manually updating the browser's URL using JavaScript.
By defining routes in the 'server.js' file.
By creating a separate 'routes' folder in the project directory.
How can Next.js assist a website owner in enhancing their search engine optimization (SEO) efforts?
It offers keyword suggestions
It automatically generates backlinks
It improves website performance
It provides built-in SEO tools
What is one advantage of using Next.js over React in a real-world scenario?
Real-time collaboration features
Native mobile app development support
Server-side rendering
Which of the following routes is correct to access the dynamic route from the browser defined in this NextJS application?
http://localhost:3000/movies/1
