Next.js 5-minute Quickstart

npx create-next-app@latest

1. What is your project named? s12g-nextjs-example
2. Would you like to use TypeScript? Yes
3. Would you like to use ESLint? No
4. Would you like to use Tailwind CSS? Yes
5. Would you like to use `src/` directory? Yes
6. Would you like to use App Router? (recommended) Yes
7. Would you like to customize the default import alias (@/*)? No

cd s12g-nextjs-example

NEXT_PUBLIC_S12G_KEY=Generating...
S12G_SECRET=Generating...

'use client'

import { PusherProvider, type PusherProviderProps } from '@harelpls/use-pusher'
import React from 'react'

const config: PusherProviderProps = {
	// required for private/presence channels
	authEndpoint: '/s12g/auth',

	// required config props
	clientKey: process.env.NEXT_PUBLIC_S12G_KEY,
	cluster: 'us', // anything goes here to make typescript happy
	// required to use S12G with Pusher's JS client
	wsHost: 'stream.s12g.net',
}

export const S12GProvider = ({
	children,
	...configProp
}: React.PropsWithChildren<Partial<PusherProviderProps>>) => (
	<PusherProvider {...{ ...config, ...configProp }}>{children}</PusherProvider>
)

'use client'

import { useChannel, useEvent } from '@harelpls/use-pusher'
import { useState } from 'react'

import { S12GProvider } from '@/components/s12g-provider'

type DemoMessageEvent = { message: string }

const Page = () => {
	const [messages, setMessages] = useState<DemoMessageEvent[]>([])
	const channel = useChannel('quickstart') // don't change 'quickstart' yet
	useEvent<DemoMessageEvent>(channel, 'test', message => { // don't change 'test' yet
		if (message) setMessages(messages => [...messages, message])
	})
	return (
		<main className="flex min-h-screen flex-col justify-between p-24">
			<h1 className="text-xl">S12G Demo</h1>
			<div className="mb-auto flex flex-col">
				{messages.map((message, i) => (
					<pre key={i}>
						{i + 1}. {JSON.stringify(message)}
					</pre>
				))}
			</div>
		</main>
	)
}

export default () => (
  <S12GProvider>
    <Page />
  </S12GProvider>
)

import Pusher from '@s12g/pusher'
import { type NextRequest } from 'next/server'
import process from 'node:process'

const client = new Pusher({
	appId: process.env.NEXT_PUBLIC_S12G_KEY!,
	key: process.env.NEXT_PUBLIC_S12G_KEY!,
	secret: process.env.S12G_SECRET!,
})

export const dynamic = 'force-dynamic'

export async function POST(request: NextRequest) {
	const data = await request.formData()
	const socketId = data.get('socket_id')
	const channelName = data.get('channel_name')
	if (!socketId || !channelName)
		return new Response('Missing socket_id or channel_name', { status: 400 })
	return Response.json(client.authorizeChannel(socketId as string, channelName as string))
}

...  
  const [messages, setMessages] = useState<DemoMessageEvent[]>([])
  // change 'quickstart' to 'private-quickstart'
  const channel = useChannel('private-quickstart')
  useEvent<DemoMessageEvent>(channel, 'test', message => {
...

...
export const S12GProvider = ({
	children,
	...configProp
}: React.PropsWithChildren<Partial<PusherProviderProps>>) => {
  // retrieve your user's secret token from your existing auth system
	const Authorization = useMemo(() => `Bearer USER_SECRET_TOKEN_123`, [])
	return (
		<PusherProvider
			{...{
				...config,
				auth: { // add an `auth` object with `headers` and include `Authorization`
					headers: {
						Authorization, // here's the value from your auth system
					},
				},
				...configProp, // recommend `configProp` come last in case you want to override `auth`
			}}
		>
			{children}
		</PusherProvider>
	)
}
...

...
  if (!socketId || !channelName)
		return new Response('Missing socket_id or channel_name', { status: 400 })
    // grab the Authorization header from NextRequest
	const Authorization = request.headers.get('Authorization')
	if (!Authorization) return new Response('Missing Authorization header', { status: 400 })
	const [_type, token] = Authorization.split(' ')
	// here's where you use the token to authenticate the user with your existing auth system
	// we'll just do something silly to demonstrate
	if (token !== 'USER_SECRET_TOKEN_123')
        // you may want to do more validation here, like determining if the user should have access to `channelName`
		return new Response('Unauthorized', { status: 401 })
	return Response.json(client.authorizeChannel(socketId as string, channelName as string))
}

import Pusher from '@s12g/pusher'
import { type NextRequest } from 'next/server'
import process from 'node:process'

const client = new Pusher({
	appId: process.env.NEXT_PUBLIC_S12G_KEY!,
	key: process.env.NEXT_PUBLIC_S12G_KEY!,
	secret: process.env.S12G_SECRET!,
})

export const dynamic = 'force-dynamic'

export async function GET(_request: NextRequest) {
	await client.trigger('private-quickstart', 'test', {
		message: `Hello from Next.js at ${new Date().toISOString()}`,
	})
	return new Response('Event triggered')
}