Next.js provides a suite of functions and hooks that enhance server-side rendering, static generation, routing, and more. These functions are essential for managing data fetching, handling requests, and optimizing performance in Next.js applications.
Next.js Functions
Next.js functions simplify server-side rendering and static site generation, crucial for optimizing performance. Key functions include getInitialProps, getServerSideProps, getStaticPaths, and getStaticProps, which manage data fetching and page rendering. Hooks like useRouter and useAmp aid in navigation and AMP page detection, respectively. These functions enhance flexibility and efficiency in Next.js applications.
These functions are given below in details.
getInitialProps
Next.js getInitialProps fetches initial data for server-side rendering in custom pages and components, used for pre-rendering data on the server before sending it to the client.
MyPage.getInitialProps = async (context) => { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { data }; };getServerSideProps
Next.js getServerSideProps fetches data on each request for server-side rendering, allowing dynamic content generation for each request.
export async function getServerSideProps(context) { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; }getStaticPaths
Next.js getStaticPaths defines dynamic routes to be pre-rendered at build time, used with getStaticProps for static generation of dynamic pages.
export async function getStaticPaths() { const paths = [{ params: { id: '1' } }, { params: { id: '2' } }]; return { paths, fallback: false }; }getStaticProps
Next.js getStaticProps fetches data at build time for static generation, enabling static site generation with pre-rendered data.
export async function getStaticProps(context) { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; }NextRequest
NextRequest provides a typed response object for handling API routes and middleware. Extends the native Response interface with Next.js-specific properties.
export default function handler(req, res) { res.status(200).json({ message: 'Hello, world!' }); }NextResponse
NextResponse provides a typed response object for API routes and middleware, extending the native Response interface with Next.js-specific properties.
export default function handler(req, res) { res.status(200).json({ message: 'Hello, world!' }); }useAmp
Next.js useAmp determines if the current page is being rendered in AMP mode, facilitating AMP-specific rendering logic.
import { useAmp } from 'next/amp'; function MyComponent() { const isAmp = useAmp(); return <div>{isAmp ? 'AMP Mode' : 'Non-AMP Mode'}</div>; }useReportWebVitals
Next.js useReportWebVitals reports web vitals metrics for performance monitoring, aiding in the measurement of web performance metrics.
import { useReportWebVitals } from 'next/reportWebVitals'; useReportWebVitals(metric => { console.log(metric); });useRouter
Next.js useRouter provides access to the Next.js router object, enabling navigation and access to route parameters in components
import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); return <button onClick={() => router.push('/about')}>Go to About</button>; }userAgent
Next.js userAgent retrieves the user agent string for the current request, useful for server-side device detection and handling.
export default function handler(req, res) { const userAgent = req.headers['user-agent']; res.status(200).json({ userAgent }); }Steps to Create the NextJS Application
Step 1: To create a NextJS project we require NodeJS installed on our system. You can install it from the official website of NodeJS
Step 2: To create a project run the following script in the terminal.
npx create-next-app demo
Step 3: Navigate to the root directory of your project.
cd demo
Project Structure:
Project StructureThe updated dependencies in package.json file will look like:
"dependencies": { "react": "^18", "react-dom": "^18", "next": "14.1.0" }Example: Below is the example next.js getStaticProps function. It is used to pre-fetch Pokémon data from an API at build time and pass it to the Home component for rendering as a static, pre-rendered page.
JavaScript // Filename - pages/index.js // Page Component, receiving allPokemons // from getStaticProps export default function Home({ allPokemons }) { return ( <ul> { /* mapping all the data inside an unordered list */} {allPokemons.map((poke) => ( <li key={poke.url}>{poke.name}</li> ))} </ul> ); } export async function getStaticProps() { // Call the fetch method and passing // the pokeAPI link const response = await fetch( 'https://pokeapi.co/api/v2/pokemon/'); // Parse the JSON const data = await response.json(); // Finally we return the result // inside props as allPokemons return { props: { allPokemons: data.results }, }; } Start your application using the following command.
npm run dev
Output:
Conclusion
Next.js functions and hooks provide essential tools for optimizing server-side rendering, static generation, routing, and performance. By leveraging these functions, developers can build robust and high-performance web applications.
Similar Reads
Next.js Function Fetch Next.js is a React framework that enhances UI development with built-in features like server-side rendering and static site generation. It supports data fetching both on the server and client sides, enabling developers to load and manage data efficiently. By utilizing functions like fetch, Next.js a
6 min read
Server Actions in Next.js Server actions in Next.js refer to the functionalities and processes that occur on the server side of a Next.js application. It enables efficient, secure handling of server-side operations like data fetching, form processing, and database interactions, enhancing application security and performance
4 min read
Functions in JavaScript Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.JavaScriptfunction sum(x, y) { return x + y; } console.log(sum(6, 9));Output15 Function Syntax and W
5 min read
Next.js Functions: redirect Next.js is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. One of its features is redirect Function. In this article, we will learn abou
2 min read
Next.js Functions: notFound Next.js is a React framework that is used to build full-stack web applications. It is used both for front-end and back-end development, simplifying React development with powerful features. In this article, we will explore the notFound function, which is used to handle cases where a requested resour
3 min read