blitz-js/blitz

Next 13 App Directory / Server Components

tordans opened this issue · 0 comments

tordans commented

This ticket is taken over by @siddhsuresh. (@tordans opened it but all the text and work is by @siddhsuresh.)

This is a master issue to keep track of the development for blitz to work seamlessly with react server components and the new Next 13 app directory.

Links:

🔧 Auth

New Blitz Auth Hook getServerSession

  • Create a new auth hook getServerSession that has the following API: #4079
getServerSession(RequestCookies | ReadonlyRequestCookies, Headers) => SessionContext

Example Usage in React Server Component in app directory in Next 13

import {cookies, headers} from "next/headers"
import {getServerSession} from "src/blitz-server"
import getCurrentUser from "src/users/queries/getCurrentUser"

export default async function Home() {
  const session = await getServerSession(cookies(), headers())
  const user = await getCurrentUser(null, {session})
  return(
    <>
        ...
    </>
  )
}

🔧 RPC

  • Add "use client" directive to the required files containing react-query to work with server components. #4079
  • Add logic to use the next router in react-query for state only if in pages directory #4079
  • New Blitz React Server Component Wrapper #4079
    Create a new wrapper functionBlitzProvider to be imported from setupBlitzClient in src/blitz-client.ts
    Example Usage
// layout.ts
import BlitzProvider from "src/blitz-client"

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <head>
        ...
      </head>
      <body>
        <BlitzProvider>
          ...
        </BlitzProvider>
      </body>
    </html>
  )
}

🔧 @blitzjs/next

  • Add "use client" directive to the required files containing react-query or react hooks to work with server components. #4079

🔧 Generator

  • Make Next13 the default for new Blitz Apps — happened in 7abfb90
  • Fix #4066
  • Add new template for creating pages in the new file structure (page.ts, layout.ts, error.ts and loading.ts). Allow the user the option to generate either the server component-based layouts in the app directory or the existing pages directory

⚠️Integration Tests

  • Add a new integration test like the auth-with-rpc test for the app directory-based application.

📖 Documentation