NextJs Flashcards

(17 cards)

1
Q

for mostly which type of website is next JS used

A

desktop website
static website
server rendered applications
SEO friendly websites
Progressive web application or pwa

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

how a custom error page be created in NextJs

A

_error.js has to be defined in the page folder
and_error.js component of our own has to be imported rather than the next/error for using our custom error page

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

Mention benefit of having a serverless model

A

It helps splitting the app into a smaller parts named lambdas

Also helps improving scalability and readability

To target=serverless should be added to the next config JS

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

What is code splitting

A

Breaking down large bundles into smaller chunks, loading only necessary code on demand, enhances performance, reduces initial load times.

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

Differentiate between imperative and declarative programming

A

Imperative: Focuses on how to achieve a result, step-by-step instructions, mutable state.

Declarative: Focuses on what result is needed, abstracts the control flow, emphasizes immutability.

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

What properties are arised in getinitialprops

A

GetInitialProps in Next.js provides access to context object, allowing data fetching before rendering. Key properties include pathname, query, asPath, req, res, and err.

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

What important features are introduced in Next js12

A

Rust based compiler
Faster image optimization
On demand instrumental static regeneration
Resct 18
Self hosted next JS improvement
Zero config jest plug-in

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

What features of nextj is in terms of SEO

A

Next.js SEO Features:

  1. Server-Side Rendering (SSR):
    • Improves SEO by providing search engines with fully rendered HTML.
  2. Static Site Generation (SSG):
    • Generates static HTML at build time for faster initial loads and better SEO.
  3. Automatic HTML Head Tag Population:
    • Simplifies adding meta tags, titles, and other head elements for SEO optimization.
  4. Clean Semantic Markup:
    • Encourages structured and accessible HTML for search engine indexing.
  5. Efficient Loading:
    • Lazy loading, automatic image optimization, and optimized bundles enhance performance and SEO.
  6. Automatic Sitemap Generation:
    • Facilitates search engine crawling and indexing by providing a sitemap.xml file.
  7. Canonical URLs:
    • Supports defining canonical URLs for content consistency.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are the advantages of using Next.js over React?

A

Next.js offers several advantages over React, including server-side rendering, automatic code splitting, static site generation, dynamic imports, optimized performance, and easy deployment. Additionally, Next.js supports built-in SEO and analytics, making it easier to optimize your application for search engines and track user engagement.

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

What is the difference between a container component and a presentational component?

A

A container component is responsible for managing the state and logic of a component, while a presentational component is responsible for rendering the UI based on the props passed down from the container component.

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

Explain how next JS facilitates SSR and its advantage

A

It enhances SEO, initial load performance and user experience

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

What’s the significance of pages directory in the next JS

A

Pages directory organizes routes and each file represent a route

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

What’s the difference between routing in next JS and react JS

A

In next JS is automatic routing and no configuration is required

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

What parameters are affective in image optimization in next JS

A

1 it uses lazy loading
2 it generates image sizes and load them based on users viewport
3 automatic conversion formats like web p
4 optimization on build time

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

What is jamstack optimization

A

JavaScript, APIs, and Markup

Jamstack is a modern web development architecture that emphasizes the decoupling of the frontend and backend, providing enhanced security, scalability, and performance

. Services like Vercel and Netlify are popular Jamstack platforms providing SEO benefits through features like automatic deployment, serverless functions, and content delivery networks (CDNs).

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

Benefits of Server Rendering

A
    • Data fetching
    • Security
    • Imporce Page loadtime & FCP
    • Caching: reducing the amount of rendering and data fetching in multiple requests
    • Bundle size
    • SEO and Social Network Shareability
    • Streaming: let smaller chunks and stream them to the client
17
Q

Opinion about RSC in 2025
React Server Components

A

React Server Components (RSC) “kind of underdelivered”.

Key Criticisms:
- Poor Developer Experience (DX): The biggest problem is the disconnect between “the promised gain and the cost of DX”. users “basically have to pay with your developer experience in order to use RSC”.

  • Mental Complexity:
    The way RSC is integrated through Next.js makes the design and implementation “so tightly coupled” with the framework. The ability to have a mixed graph of server and client components “adds a ton of mental complexity” for users trying to “reason about your application”.
  • Confusion Over Execution:

It’s often unclear to a user, “Does this piece of code run on the server or run on the client”. To make things worse, they “don’t behave the same way,” as some things can be used on the client but not on the server.

  • Lack of Proven Performance Gain:
    not heard “super convincing stories on how RSC has like say fundamentally make something more performant”.