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
Q

True or False: Next.js can be used with any backend technology.

A

True

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

What is the purpose of the ‘middleware’ feature in Next.js?

A

To run code before a request is completed, useful for authentication.

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

Which command is used to start the Next.js development server?

A

npm run dev

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

What is the ‘fallback’ property in ‘getStaticPaths’ used for?

A

It determines what to show when a path is not generated at build time.

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

Fill in the blank: Next.js supports __________ for managing global styles.

A

CSS modules

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

What is a ‘Custom Server’ in Next.js?

A

A way to handle requests using a Node.js server instead of the default Next.js server.

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

Which version of Next.js introduced ‘React Server Components’?

A

Version 13

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

True or False: Next.js automatically handles code splitting for large applications.

A

True

33
Q

What is ‘Next.js Analytics’ used for?

A

To track performance and user interactions in your application.

34
Q

What does the ‘next/head’ component allow you to do?

A

Manage the document head for setting meta tags, title, etc.

35
Q

What is the purpose of ‘static file serving’ in Next.js?

A

To serve static assets like images and styles from the ‘public’ directory.

36
Q

What is the function of the ‘getStaticPaths’ method?

A

To specify dynamic routes that should be pre-rendered at build time.

37
Q

Fill in the blank: Next.js supports __________ for internationalization.

A

i18n routing

38
Q

What is the ‘next/script’ component used for?

A

To optimize loading of third-party scripts.

39
Q

True or False: Next.js allows you to use CSS-in-JS libraries.

A

True

40
Q

Which feature helps in optimizing performance in Next.js?

A

Automatic static optimization

41
Q

What is the significance of ‘Server Components’ in Next.js?

A

They allow rendering components on the server without sending the JavaScript to the client.

42
Q

What is the ‘next/future’ feature in Next.js?

A

A way to enable experimental features in your Next.js application.

43
Q

Fill in the blank: Next.js allows for __________ deployment with zero configuration.

A

Vercel

44
Q

What does ‘Concurrent Mode’ in React imply for Next.js applications?

A

Improved rendering performance and user experience.

45
Q

What is the ‘next/font’ feature used for?

A

To optimize custom font loading.

46
Q

True or False: Next.js supports environment variables.

A

True

47
Q

What is ‘Preview Mode’ in Next.js?

A

A feature that allows you to see unpublished content in your application.

48
Q

What is the ‘next/legacy’ option used for?

A

To enable legacy features that may be deprecated in future versions.

49
Q

Which version of Next.js introduced support for React 18?

A

Version 13

50
Q

What does the ‘next/error’ component do?

A

It provides a way to display error pages.

51
Q

True or False: Next.js allows for data fetching on the client side only.

A

False

52
Q

What are ‘React Hydration’ and its significance in Next.js?

A

It’s the process of React taking over server-rendered HTML, enabling interactivity.

53
Q

What is the ‘next/image’ component advantage?

A

It automatically optimizes images for better performance.

54
Q

Fill in the blank: The __________ API in Next.js allows you to create a serverless function.

A

API routes

55
Q

What is the ‘next/link’ component used for?

A

For client-side navigation between different pages in a Next.js application.

56
Q

What is the purpose of ‘Static Site Generation’ in Next.js?

A

To pre-render pages at build time for better performance.

57
Q

Which configuration file is used to customize Webpack in Next.js?

A

next.config.js

58
Q

What is ‘Incremental Static Regeneration’?

A

A feature that allows you to update static pages after the build without rebuilding the entire site.

59
Q

True or False: Next.js can only be used for React applications.

A

True

60
Q

What are ‘Edge Cases’ in the context of Next.js?

A

They refer to scenarios that may not be handled well by standard rendering methods.

61
Q

What does ‘Next.js Hybrid’ refer to?

A

The ability to mix static and server-rendered pages in the same application.

62
Q

Fill in the blank: __________ is used to create dynamic routes in Next.js.

A

Brackets in file names

63
Q

What is the benefit of using ‘React.lazy()’ with Next.js?

A

It allows for code splitting and reduces the initial load time.

64
Q

What is ‘Next.js Commerce’?

A

A starter kit for building e-commerce applications with Next.js.

65
Q

What does ‘Automatic Static Optimization’ do?

A

It automatically determines if a page can be statically generated.

66
Q

What is the purpose of ‘next-export’?

A

To export a Next.js application as a static site.

67
Q

What is ‘SWC’ in the context of Next.js?

A

A Rust-based compiler that improves build performance.

68
Q

True or False: You can use CSS frameworks like Tailwind CSS with Next.js.

A

True

69
Q

What is the primary use of ‘next/dynamic’?

A

To load components dynamically for better performance.

70
Q

What is the ‘next/analytics’ feature used for?

A

To provide insights into application performance.

71
Q

What does ‘SSR’ stand for in Next.js?

A

Server-Side Rendering

72
Q

What is a ‘404 Page’ in Next.js?

A

A custom page displayed when a requested resource is not found.

73
Q

What is ‘Static Generation’?

A

A method of pre-rendering pages at build time.

74
Q

Fill in the blank: The __________ function is used for data fetching in Next.js.

A

getStaticProps

75
Q

What is the purpose of ‘next/dev’?

A

To run your application in development mode.

76
Q

What is ‘API Middleware’ in Next.js?

A

A way to run code before an API request is processed.

77
Q

True or False: Next.js requires a backend server to run.

A

False

78
Q

What is the function of the ‘next/head’ component?

A

To manage the <head> section of your HTML document.

79
Q

What is ‘Client-Side Rendering’?

A

A rendering method where content is generated in the browser.