@blitzjs/next

Overview

The @blitzjs/next adapter exposes functions & components specific for the Next.js framework.

Setup

You can install @blitzjs/next by running the following command:

npm i @blitzjs/next # yarn add @blitzjs/next # pnpm add @blitzjs/next

Client

Inside app > blitz-client.ts

import { setupBlitzClient } from "@blitzjs/next"

export const { withBlitz } = setupBlitzClient({
  plugins: [],
})

Then inside pages > _app.tsx wrap MyApp function with the withBlitz HOC component.

Note: An <ErrorBoundary /> provider and <ErrorComponent /> component is supplied by @blitzjs/next

import {
  ErrorFallbackProps,
  ErrorComponent,
  ErrorBoundary,
} from "@blitzjs/next"
import { AuthenticationError, AuthorizationError } from "blitz"
import type { AppProps } from "next/app"
import React, { Suspense } from "react"
import { withBlitz } from "app/blitz-client"

function RootErrorFallback({ error }: ErrorFallbackProps) {
  if (error instanceof AuthenticationError) {
    return <div>Error: You are not authenticated</div>
  } else if (error instanceof AuthorizationError) {
    return (
      <ErrorComponent
        statusCode={error.statusCode}
        title="Sorry, you are not authorized to access this"
      />
    )
  } else {
    return (
      <ErrorComponent
        statusCode={(error as any)?.statusCode || 400}
        title={error.message || error.name}
      />
    )
  }
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ErrorBoundary FallbackComponent={RootErrorFallback}>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default withBlitz(MyApp)

Server

Inside app > blitz-server.ts

import { setupBlitzServer } from "@blitzjs/next"

export const { gSSP, gSP, api } = setupBlitzServer({
  plugins: [],
})

The gSSP, gSP & api functions all pass down the context of the session if you're using the auth plugin. Read more about the auth plugin here @blitzjs/auth.

gSP

import { gSP } from "app/blitz-server"

export const getStaticProps = gSP(async ({ ctx }) => {
  return {
    props: {
      data: {
        userId: ctx?.session.userId,
        session: {
          id: ctx?.session.userId,
          publicData: ctx?.session.$publicData,
        },
      },
    },
  }
})

gSSP

import { gSSP } from "app/blitz-server"

export const getServerSideProps = gSSP(async ({ ctx }) => {
  return {
    props: {
      userId: ctx?.session.userId,
      publicData: ctx?.session.$publicData,
    },
  }
})

api

import { api } from "app/blitz-server"

export default api(async (req, res, ctx) => {
  res.status(200).json({ userId: ctx?.session.userId })
})

For more information about Next.js API routes, visit their docs at https://nextjs.org/docs/api-routes/introduction

ISR Revalidation

Since Next.js v12.2.0 getStaticProps can be manually revalidated i.e. if you have static blog posts you can instantly revalidate a post on save.

You can call next.js revalidate inside of api functions with res.revalidate() or our enhanced ctx.revalidate() (res.blitzCtx.revalidate()) which also accepts generated route manifests.

const revalidateFn = resolver.pipe(async (_, ctx) => {
  await ctx.revalidatePage("/my-static-page")
  return true
})

export default revalidateFn