Next.js - Functions

---

---

Function Reference

Next.js have several builtin APIs, functions, hooks and methods to handle data at client side and server side. This chapter will give reference to all of those APIs, functions, hooks and methods in Next.js with some added examples.

Page Router Functions

Following table provide reference to all page router functions in Next.js

App Router Functions

Following table provide reference to all function used in Next.js App Router.

Next.js Functions Examples

Example 1

Let's look at an example to understand how to use generateMetadata() function The generateMetadata() function is used to dynamically generate metadata such as titles, description of a webpage based on route parameters or fetched data.

In the following code, we will generate a dynamic title (ie, the metadata) for a component based on page selected by user.

// app/products/[id]/page.tsx

import { Metadata } from "next";

type Props ={
    params: {
        id: string;
    };
}
// Dynamic Metadata function
export const generateMetadata = ({ params }: Props): Metadata => {
    return {
        title: `Product ${params.id} - My Store`,
    };
}

export default function ProductPage({params }: Props) {

    return (
        <div>
            <h1>Product {params.id}</h1>
            <p>This is the product page for item {params.id}</p>
        </div>
    );
}

Output

In the output, you can see that the title of page is changing based on route we choose.

Example 2

Now, let's look at the useAmp method. The useAmp method is a utility method used to detect if the current page is being rendered as an AMP (Accelerated Mobile Pages) page.

The code below shows how to use the useAmp method in Next.js. We created a button that toggles between AMP version and Non Amp version of same page. See the output below.

// pages/index.tsx

import { useAmp } from 'next/amp';

export const config = { amp: 'hybrid' }; // Enable Hybrid AMP mode

export default function Home() {
  const isAmp = useAmp();

  return (
    <div>
      <h1>Welcome to Next.js with AMP</h1>
      {isAmp ? (
        <p>You are viewing the AMP version of this page.</p>
      ) : (
        <p>You are viewing the standard version of this page.</p>
      )}
      <a href={isAmp ? '/' : '/?amp=1'}>
        Switch to {isAmp ? 'Standard' : 'AMP'} Mode
      </a>
    </div>
  );
}

Output

In the output, AMP mode is getting toggled on clicking the link.