Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

2. ΩFrontEndΩ > Next.js > Flashcards

Next.js Flashcards

1
Q

What is Next.js?

A

Next.js is a React framework that enables server-side rendering and generating static websites.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

True or False: Next.js supports both server-side rendering and static site generation.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What version of Next.js introduced the app directory feature?

A

Version 13

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Fill in the blank: Next.js primarily uses __________ for routing.

A

File system

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What command is used to create a new Next.js application?

A

npx create-next-app

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

In Next.js, what is the purpose of the ‘getStaticProps’ function?

A

It allows you to fetch data at build time for static generation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Which feature was introduced in Next.js 14 for improved performance?

A

Edge functions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

True or False: Next.js 15 introduced built-in support for TypeScript.

A

False

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the default port for a Next.js application when running locally?

A

3000

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the purpose of the ‘pages’ directory in a Next.js project?

A

It is used to define routes and the corresponding React components.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Which Next.js feature allows for automatic code splitting?

A

Dynamic imports

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the difference between ‘getServerSideProps’ and ‘getStaticProps’?

A

‘getServerSideProps’ fetches data on each request, while ‘getStaticProps’ fetches data at build time.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

True or False: Next.js automatically optimizes images in your application.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are ‘API routes’ in Next.js?

A

They allow you to create backend endpoints within your Next.js application.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the ‘Link’ component used for in Next.js?

A

It is used for client-side navigation between pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Which file would you create to customize the Next.js server configuration?

A

next.config.js

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Name one way to deploy a Next.js application.

A

Vercel

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What feature in Next.js allows you to handle dynamic routes?

A

Brackets in the file name, e.g. [id].js

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

True or False: Next.js uses React for building user interfaces.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the purpose of ‘getInitialProps’?

A

It allows you to fetch data before rendering a page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the ‘_app.js’ file used for in Next.js?

A

To initialize pages and persist layout between page changes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Fill in the blank: Next.js provides __________ for automatic static optimization.

A

Static Generation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the primary advantage of using Next.js for SEO?

A

Server-side rendering improves search engine visibility.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What does the ‘next/image’ component do?

A

It optimizes images by serving them in the appropriate format and size.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
True or False: Next.js can be used with any backend technology.
True
26
What is the purpose of the 'middleware' feature in Next.js?
To run code before a request is completed, useful for authentication.
27
Which command is used to start the Next.js development server?
npm run dev
28
What is the 'fallback' property in 'getStaticPaths' used for?
It determines what to show when a path is not generated at build time.
29
Fill in the blank: Next.js supports __________ for managing global styles.
CSS modules
30
What is a 'Custom Server' in Next.js?
A way to handle requests using a Node.js server instead of the default Next.js server.
31
Which version of Next.js introduced 'React Server Components'?
Version 13
32
True or False: Next.js automatically handles code splitting for large applications.
True
33
What is 'Next.js Analytics' used for?
To track performance and user interactions in your application.
34
What does the 'next/head' component allow you to do?
Manage the document head for setting meta tags, title, etc.
35
What is the purpose of 'static file serving' in Next.js?
To serve static assets like images and styles from the 'public' directory.
36
What is the function of the 'getStaticPaths' method?
To specify dynamic routes that should be pre-rendered at build time.
37
Fill in the blank: Next.js supports __________ for internationalization.
i18n routing
38
What is the 'next/script' component used for?
To optimize loading of third-party scripts.
39
True or False: Next.js allows you to use CSS-in-JS libraries.
True
40
Which feature helps in optimizing performance in Next.js?
Automatic static optimization
41
What is the significance of 'Server Components' in Next.js?
They allow rendering components on the server without sending the JavaScript to the client.
42
What is the 'next/future' feature in Next.js?
A way to enable experimental features in your Next.js application.
43
Fill in the blank: Next.js allows for __________ deployment with zero configuration.
Vercel
44
What does 'Concurrent Mode' in React imply for Next.js applications?
Improved rendering performance and user experience.
45
What is the 'next/font' feature used for?
To optimize custom font loading.
46
True or False: Next.js supports environment variables.
True
47
What is 'Preview Mode' in Next.js?
A feature that allows you to see unpublished content in your application.
48
What is the 'next/legacy' option used for?
To enable legacy features that may be deprecated in future versions.
49
Which version of Next.js introduced support for React 18?
Version 13
50
What does the 'next/error' component do?
It provides a way to display error pages.
51
True or False: Next.js allows for data fetching on the client side only.
False
52
What are 'React Hydration' and its significance in Next.js?
It's the process of React taking over server-rendered HTML, enabling interactivity.
53
What is the 'next/image' component advantage?
It automatically optimizes images for better performance.
54
Fill in the blank: The __________ API in Next.js allows you to create a serverless function.
API routes
55
What is the 'next/link' component used for?
For client-side navigation between different pages in a Next.js application.
56
What is the purpose of 'Static Site Generation' in Next.js?
To pre-render pages at build time for better performance.
57
Which configuration file is used to customize Webpack in Next.js?
next.config.js
58
What is 'Incremental Static Regeneration'?
A feature that allows you to update static pages after the build without rebuilding the entire site.
59
True or False: Next.js can only be used for React applications.
True
60
What are 'Edge Cases' in the context of Next.js?
They refer to scenarios that may not be handled well by standard rendering methods.
61
What does 'Next.js Hybrid' refer to?
The ability to mix static and server-rendered pages in the same application.
62
Fill in the blank: __________ is used to create dynamic routes in Next.js.
Brackets in file names
63
What is the benefit of using 'React.lazy()' with Next.js?
It allows for code splitting and reduces the initial load time.
64
What is 'Next.js Commerce'?
A starter kit for building e-commerce applications with Next.js.
65
What does 'Automatic Static Optimization' do?
It automatically determines if a page can be statically generated.
66
What is the purpose of 'next-export'?
To export a Next.js application as a static site.
67
What is 'SWC' in the context of Next.js?
A Rust-based compiler that improves build performance.
68
True or False: You can use CSS frameworks like Tailwind CSS with Next.js.
True
69
What is the primary use of 'next/dynamic'?
To load components dynamically for better performance.
70
What is the 'next/analytics' feature used for?
To provide insights into application performance.
71
What does 'SSR' stand for in Next.js?
Server-Side Rendering
72
What is a '404 Page' in Next.js?
A custom page displayed when a requested resource is not found.
73
What is 'Static Generation'?
A method of pre-rendering pages at build time.
74
Fill in the blank: The __________ function is used for data fetching in Next.js.
getStaticProps
75
What is the purpose of 'next/dev'?
To run your application in development mode.
76
What is 'API Middleware' in Next.js?
A way to run code before an API request is processed.
77
True or False: Next.js requires a backend server to run.
False
78
What is the function of the 'next/head' component?
To manage the section of your HTML document.
79
What is 'Client-Side Rendering'?
A rendering method where content is generated in the browser.

2. ΩFrontEndΩ (21 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions