Pages (getServerSideProps)

Please note the addition of buildClerkProps in the return statement, which informs our React helpers of the authentication state during server-side rendering (like useAuth(), <SignedIn>, and <SignedOut>).

Optionally, use the Preload User example to make user profile data available during server-side rendering.

1
import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
2
import { GetServerSideProps } from "next";
3

4
export const getServerSideProps: GetServerSideProps = async (ctx) => {
5
  const { userId } = getAuth(ctx.req);
6
  if (!userId) {
7
    return {
8
      redirect: {
9
        destination: "/sign-in?redirect_url=" + ctx.resolvedUrl,
10
        permanent: false,
11
      },
12
    };
13
  }
14
  return { props: { ...buildClerkProps(ctx.req) } };
15
};
16

1
import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
2

3
export const getServerSideProps= async (ctx) => {
4
  const { userId } = getAuth(ctx.req);
5
  if (!userId) {
6
    return {
7
      redirect: {
8
        destination: "/sign-in?redirect_url=" + ctx.resolvedUrl,
9
        permanent: false,
10
      },
11
    };
12
  }
13
  return { props: { ...buildClerkProps(ctx.req) } };
14
};

1
import { clerkClient, getAuth, buildClerkProps } from "@clerk/nextjs/server";
2
import { GetServerSideProps } from 'next'
3

4
export const getServerSideProps: GetServerSideProps = async ctx => {
5
  const { userId } = getAuth(ctx.req)
6
  if (!userId) {
7
    return {
8
      redirect: {
9
        destination: "/sign-in?redirect_url=" + ctx.resolvedUrl,
10
        permanent: false,
11
      },
12
    };
13
  }
14
  const user = userId ? await clerkClient.users.getUser(userId) : undefined;
15
  
16
  return { props: { ...buildClerkProps(ctx.req, { user }) } }
17
}

1
import { clerkClient, getAuth, buildClerkProps } from "@clerk/nextjs/server";
2

3

4
export const getServerSideProps = async ctx => {
5
  const { userId } = getAuth(ctx.req)
6
  if (!userId) {
7
    return {
8
      redirect: {
9
        destination: "/sign-in?redirect_url=" + ctx.resolvedUrl,
10
        permanent: false,
11
      },
12
    };
13
  }
14
  const user = userId ? await clerkClient.users.getUser(userId) : undefined;
15
  
16
  return { props: { ...buildClerkProps(ctx.req, { user }) } }
17
}

Before Next.js 12.2

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2
import type { GetServerSideProps } from "next";
3

4
export const getServerSideProps: GetServerSideProps = withServerSideAuth(({ req, resolvedUrl }) => {
5
  const { sessionId } = req.auth;
6

7
  if (!sessionId) {
8
    return { 
9
      redirect: { 
10
        destination: "/sign-in?redirect_url=" + resolvedUrl,
11
        permanent: false
12
      } 
13
    };
14
  }
15

16
  return { props: {} };
17
});

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2

3
export const getServerSideProps = withServerSideAuth(({ req, resolvedUrl }) => {
4
  const { sessionId } = req.auth;
5

6
  if (!sessionId) {
7
    return { 
8
      redirect: { 
9
        destination: "/sign-in?redirect_url=" + resolvedUrl,
10
        permanent: false
11
      } 
12
    };
13
  }
14

15
  return { props: {} };
16
});

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2
import type { GetServerSideProps } from "next";
3

4
export const getServerSideProps: GetServerSideProps = withServerSideAuth({ loadUser: true });
5

6
// or, if you also need a custom getServerSideProps handler:
7
export const getServerSideProps: GetServerSideProps = withServerSideAuth(
8
  ({ req }) => {
9
    const { userId } = req.auth;
10
    // fetch data
11
    return { props: { yourData: "here" } };
12
  },
13
  { loadUser: true }
14
);

1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2

3
export const getServerSideProps = withServerSideAuth({ loadUser: true });
4

5
// or, if you also need a custom getServerSideProps handler:
6
export const getServerSideProps = withServerSideAuth(
7
  ({ req }) => {
8
    const { userId } = req.auth;
9
    // fetch data
10
    return { props: { yourData: "here" } };
11
  },
12
  { loadUser: true }
13
);

Example Response

{
  sessionId: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
  userId: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj',
  orgId: null,
  getToken: [AsyncFunction (anonymous)],
  claims: {
    azp: 'http://localhost:3000',
    exp: 1666622607,
    iat: 1666622547,
    iss: 'https://clerk.quiet.muskox-85.lcl.dev',
    nbf: 1666622537,
    sid: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
    sub: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj'
  }
}

More detailed information about the fields in this object can be found in the Authentication Object documentation.