@sodefa/next-server-context

Next Server Context

The missing server context for Next.js App Directory.

Install

pnpm add @sodefa/next-server-context

Page Context

/app/[myParam]/page.tsx

import { pageContext } from '@sodefa/next-server-context'
import { NestedServerComponent } from './NestedServerComponent'

export default pageContext.Wrapper(({ params, searchParams }) => {
  return (
    <>
      <h1>MyPage</h1>
      <NestedServerComponent />
    </>
  )
})

/app/[myParam]/NestedServerComponent.tsx

import { pageContext } from '@sodefa/next-server-context'

export const NestedServerComponent = () => {
  const { params, searchParams } = pageContext.getOrThrow()
  return <div>NestedServerComponent: {params.myParam}</div>
}

Custom Context

/myContext.ts

import { createServerContext } from '@sodefa/next-server-context'

const myContext = createServerContext<{
  myValue: string
}>()

/ParentComp.tsx

import { myContext } from './myContext'

export const ParentComp = () => {
  myContext.set({ myValue: 'hi there' })
  return <ChildComp />
}

/ChildComp.tsx

import { myContext } from './myContext'

export const ChildComp = () => {
  const { myValue } = myContext.getOrThrow()
  return <div>ChildComp: {myValue}</div>
}

Zod Context

/app/zod/[singleParam]/[...deepParams]/myContext.ts

import { createServerContextWithZod } from '@sodefa/next-server-context'
import { z } from 'zod'

export const myContext = createServerContextWithZod(
  z.object({
    params: z.object({
      singleParam: z.string(),
      deepParams: z.array(z.string()),
    }),
    searchParams: z.object({
      p1: z.string().optional(),
      p2: z.array(z.string()).optional(),
    }),
  })
)

/app/zod/[singleParam]/[...deepParams]/page.tsx

import { NestedServerComponent } from './NestedServerComponent'
import { myContext } from './myContext'

export default myContext.Wrapper(() => {
  return (
    <>
      <h1>Page with a lot of Params</h1>
      <NestedServerComponent />
    </>
  )
})

/app/zod/[singleParam]/[...deepParams]/NestedServerComponent.tsx

import { myContext } from './myContext'

export const NestedServerComponent = () => {
  const { params, searchParams } = myContext.getOrThrow()
  return (
    <pre className="p-2 border rounded flex flex-col gap-4 font-mono text-xs ">
      {JSON.stringify({ params, searchParams }, null, 2)}
    </pre>
  )
}