NextJs Flashcards
for mostly which type of website is next JS used
desktop website
static website
server rendered applications
SEO friendly websites
Progressive web application or pwa
how a custom error page be created in NextJs
_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
Mention benefit of having a serverless model
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
What is code splitting
Breaking down large bundles into smaller chunks, loading only necessary code on demand, enhances performance, reduces initial load times.
Differentiate between imperative and declarative programming
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.
What properties are arised in getinitialprops
GetInitialProps in Next.js provides access to context object, allowing data fetching before rendering. Key properties include pathname, query, asPath, req, res, and err.
What important features are introduced in Next js12
Rust based compiler
Faster image optimization
On demand instrumental static regeneration
Resct 18
Self hosted next JS improvement
Zero config jest plug-in
What features of nextj is in terms of SEO
Next.js SEO Features:
-
Server-Side Rendering (SSR):
- Improves SEO by providing search engines with fully rendered HTML.
-
Static Site Generation (SSG):
- Generates static HTML at build time for faster initial loads and better SEO.
-
Automatic HTML Head Tag Population:
- Simplifies adding meta tags, titles, and other head elements for SEO optimization.
-
Clean Semantic Markup:
- Encourages structured and accessible HTML for search engine indexing.
-
Efficient Loading:
- Lazy loading, automatic image optimization, and optimized bundles enhance performance and SEO.
-
Automatic Sitemap Generation:
- Facilitates search engine crawling and indexing by providing a sitemap.xml file.
-
Canonical URLs:
- Supports defining canonical URLs for content consistency.
What are the advantages of using Next.js over React?
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.
What is the difference between a container component and a presentational component?
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.
Explain how next JS facilitates SSR and its advantage
It enhances SEO, initial load performance and user experience
What’s the significance of pages directory in the next JS
Pages directory organizes routes and each file represent a route
What’s the difference between routing in next JS and react JS
In next JS is automatic routing and no configuration is required
What parameters are affective in image optimization in next JS
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
What is jamstack optimization
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).
