Functions in Next JS

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:

The 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.

// 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.