Next.js getServerSideProps() Function

Next.js is an open-source web development framework built on top of Node.js enabling React-based web application functionalities such as server-side rendering and generating static websites. Next.js is developed by Vercel. Developers with knowledge of HTML, CSS, JavaScript, and React can easily learn and switch to Next.js.

The getServerSideProps() is a method that is used to fetch data from the server. As a result, it’s particularly useful for sites with dynamic data or requests that must be made often, such as retrieving authorized user data.

Syntax:

export async function getServerSideProps(context) {
  return {
    props: {},
  }
}

Parameter: It accepts the context object which can have the following properties:

• params: If this page utilizes a dynamic route, the route parameters are stored in params. If the page’s name is [id].js, the parameters will be { id: … }
• req: The HTTP IncomingMessage object.
• res: The HTTP response object.
• query: An object for the query string.
• preview (boolean): If the page is in Preview Mode, preview is true; otherwise, it is false.
• previewData: The preview data set by setPreviewData.
• resolvedUrl: A normalized version of the request URL in which the _next/data prefix is removed for client transitions, and the original query values are included.
• locale: Contains the active locale (if enabled).
• locales: Contains all supported locales (if enabled).
• defaultLocale: The configured default locale.

Returns: An object containing any of the following properties is returned by the getServerSideProps function:

• props: The props object is a key-value pair in which the page component receives each value. It should be a serializable object that can be serialized using JSON.stringify.
• notFound: The page can return a 404 status and 404 Page if the notFound boolean is true. The page will return a 404 if notFound is true, even if the page was previously properly produced.
• redirect: The redirect object enables internal and external resource redirection. It needs to be the same shape as { destination: string, permanent: boolean }. In some unusual circumstances, a special status code may be required to appropriately redirect older HTTP clients. You can use the statusCode property instead of the permanent property in certain circumstances, but not both.

Setting up Project: To run the examples given ahead, you will need to create a Next.js project. For the purposes of demonstration, I have created a project named test-project. You can do so by typing the following command:

Step 1: Create a project folder and move into it by using the below command in the terminal:

mkdir foldername
cd foldername

Step 2: In that foldername, create your project by using the below command in the terminal:

npx create-next-app test-project

Step 3: Create two additional files namely about.js and home.js in the pages directory for the examples

Project Structure: This project should look like this:

Steps to run the application: To run the server in development mode, you will need to type the following command:

npm run dev

Note: By default, it will start the server on port 3000, however, if the port is already in use it will choose the first port which is free starting from 3001.

Example 1: Type the following code in pages/about.js. You can visit localhost:3000/about to view the output.

Javascript

export default function About({ message }) {
    return (
        <div>
            <h1>{message}</h1>
        </div>
    );
}

export function getServerSideProps() {
    return {
        props: { message: "Welcome to the About Page" },
    };
}

Output:

Example 2: Type the following code in pages/home.js. You can visit localhost:3000/home to view the output.

Javascript

export default function Home({ message }) {
    return (
        <div>
            <h1>This is Home Page</h1>
            <h2>{message}</h2>
        </div>
    );
}

export function getServerSideProps() {
    return {
        notFound: true
    };
}

Output:

Reference: https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props