🚀 This repository aimed to contains 500 nextjs interview questions & answers with exmample.
-
Next.js is a React framework for building full-stack web applications.
-
Using command
npx create-next-app
-
It contains React components that are automatically routed based on their file name.
-
We can manage or create routing of application in 2 ways currently.
- Pages Router
- App Router (Support from v13)
-
Routing based on the file structure in the pages directory.
-
By using square brackets in the filename
blogs/[id].js.
blogs/[id]/index.js
-
A function used for static site generation to fetch data at build time.
export async function getStaticProps() { const res = await fetch("https://api.github.com/repos/vercel/next.js"); const repo = await res.json(); return { props: { repo } }; } export default function Page({ repo }) { return repo.stargazers_count; }
-
A function used for server-side rendering to fetch data on each request.
export async function getServerSideProps() { // Fetch data from external API const res = await fetch("https://api.github.com/repos/vercel/next.js"); const repo = await res.json(); // Pass data to the page via props return { props: { repo } }; } export default function Page({ repo }) { return ( <main> <p>{repo.stargazers_count}</p> </main> ); }
-
A function used with getStaticProps to specify dynamic routes to be pre-rendered.
export async function getStaticPaths() { return { paths: [ { params: { name: "next.js", }, }, ], }; } export async function getStaticProps() { const res = await fetch("https://api.github.com/repos/vercel/next.js"); const repo = await res.json(); return { props: { repo } }; } export default function Page({ repo }) { return repo.stargazers_count; }
-
getStaticProps fetches data at build time, while getServerSideProps fetches data on each request.
-
A component for client-side navigation between pages.
import Link from 'next/link' <Link href="/">Home</Link> <Link href="/about">About</Link>
-
A hook that allows access to the router object and perform navigation.
-
Using useRouter() hook.
const router = userRouter(); function handleClick() { router.push(`/path`); } <button onClick={handleClick}>Go There</button>;
-
The _app.js file in a Next.js application is used to initialize pages and configure global settings for your app. It wraps every page with a common layout or context providers, allowing you to manage global styles, state, or functionality that should be shared across all pages.
// pages/_app.js import '../styles/globals.css'; function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default MyApp;
In this example, _app.js imports global CSS and defines the MyApp component that renders the current page (Component) with its associated props (pageProps). This setup ensures that global styles and common functionality are applied across all pages in your Next.js application.
-
A custom Document component that allows customization of the HTML document structure.
-
By importing the CSS file in _app.js.
-
Using CSS modules with a .module.css file extension.
-
Pre-rendering pages at build time.
-
Rendering pages on each request.
-
Re-generating static pages at runtime as traffic comes in.
-
A component that optimizes images for faster loading.
-
A configuration file to customize Next.js settings.
-
By adding a tsconfig.json file.
-
A feature to create API endpoints in the pages/api directory.
-
By connecting the repository to Vercel and deploying it.
-
Generating HTML for pages in advance, instead of on each request.
-
Static generation pre-renders at build time, SSR pre-renders on each request.
-
By configuring redirects in next.config.js.
-
A component for modifying the of a page.
-
Using getStaticProps or getServerSideProps.
-
A feature to load components or modules dynamically.
-
By adding them to .env.local and accessing via process.env.
-
Determines how to handle missing paths, with true, false, or ‘blocking’.
-
A way to customize the server-side behavior, e.g., with Express.
-
To manage the document head for meta tags, title, etc.
-
By adding a 404.js file in the pages directory.
-
To export a static version of the Next.js app.
-
By using the built-in font optimization feature.
-
Port 3000.
-
By configuring headers in next.config.js.
-
A feature for quick feedback when editing React components.
-
A folder for static assets served from the root URL.
-
By adding a babel.config.js file.
-
By configuring i18n settings in next.config.js.
-
A development mode that highlights potential problems in an application.
-
A single router instance accessible across the application.
-
A hook for handling translations when using i18n.
-
By adding _error.js in the pages directory.
-
Accelerated Mobile Pages, a framework for fast-loading mobile pages.
-
By adding amp attribute to a page component.
-
To optimize and serve images in a Next.js application.
-
For client-side navigation between pages.
-
pages contains routable components, components contains reusable UI components.
-
Using middleware functions in next.config.js.
-
By customizing the webpack configuration in next.config.js.
-
Client-side rendering happens in the browser, server-side rendering happens on the server.
-
Automatically determining if a page can be statically generated.
-
Using useEffect and fetch or other data fetching libraries.
-
Using libraries like NextAuth.js or custom authentication logic.
-
_app.js is for global components, _document.js is for modifying the HTML document structure.
-
By adding files to the pages/api directory.
-
Incremental Static Regeneration, updating static pages after build without redeploying.
-
By extending the Webpack configuration in next.config.js.
-
It provides type definitions for TypeScript support in Next.js.
-
Using the file-based routing system in the pages directory.
-
To enable dynamic imports and code splitting.
-
Using the Head component from next/head.
-
To compose multiple plugins in next.config.js.
-
Using client-side form handling or API routes for server-side handling.
-
By creating a Redux store and integrating it with _app.js.
-
To handle routing and navigation within a Next.js app.
-
Using libraries like styled-components or Emotion.
-
By adding a redirects property in next.config.js.
-
By installing sass and importing .scss files in your components.
-
It allows you to specify a base path for the application.
-
By creating a 500.js file in the pages directory.
-
It configures whether to include a trailing slash in the URLs.
-
push adds a new entry in the history stack, replace replaces the current entry.
-
It disables server-side rendering for the dynamically imported component.
-
By using plugins like next-pwa and configuring next.config.js.
-
By including the Google Analytics script in _app.js or _document.js.
-
To run code before a request is completed.
-
By setting up Apollo Provider in _app.js and creating a client.
-
Configuration exposed to the browser.
-
Configuration only available on the server side.
-
To customize the error page for HTTP errors.
-
Using useEffect and fetch or any other data-fetching library.
-
To manage SEO metadata in a Next.js application.
-
By installing tailwindcss and configuring it with PostCSS.
-
By installing next-i18next and setting up the configuration in next.config. js.
-
To optimize loading third-party scripts.
-
By using the next/font package or including fonts in the public directory.
-
By using Apollo Client or another GraphQL client.
-
It enables the use of the SWC compiler for minification.
-
To enable composition of multiple plugins in Next.js configuration.
-
An application that uses both static generation and server-side rendering.
-
By setting headers in the API route handlers.
-
To map an incoming request path to a different destination path.
-
Using libraries like cookie or js-cookie to set and retrieve cookies.
By storing tokens in cookies or local storage and sending them with requests.
[:arrow_up: Back to Top](#table-of-contents)
-
To configure and enable Progressive Web App features in Next.js.
-
To generate sitemaps for a Next.js application.