Developer Docs
Ask or search…
K

NextJs Package

The Memberstack NextJs package is a wrapper around @memberstack/react while also containing server actions that can be use with the latest app router and still with getServerSideProps.

Getting Started

First, you'll need to install the Memberstack Nextjs package:
npm install @memberstack/nextjs
You have access to client side packages at @memberstack/nextjs/client. Wrap the children routes of your app with MemberstackProvider.

App Router

For the app router, that means in app/layout.tsx
// layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { MemberstackProvider } from '@memberstack/nextjs/client'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<MemberstackProvider config={{
publicKey: process.env.NEXT_PUBLIC_MEMBERSTACK_PUBLIC_KEY as string
}}>
<>{children}</>
</MemberstackProvider>
</body>
</html>
)
}

Pages Directory

Or if you're using the pages router, inside pages/_app.tsx
import type { AppProps } from 'next/app'
import { MemberstackProvider } from '@memberstack/nextjs/client'
export default function App({ Component, pageProps }: AppProps) {
return <MemberstackProvider config={{
publicKey: process.env.NEXT_PUBLIC_MEMBERSTACK_PUBLIC_KEY as string
}}>
<Component {...pageProps} />
</MemberstackProvider>
}
You can then access all the same react components on the client
'use client'
import { MemberstackProtected, SignInModal, useAuth } from "@memberstack/nextjs/client"
...
const {userId, signOut, isLoggedIn } = useAuth()
...
<MemberstackProtected
fallback={<div>Loading.....</div>}
onUnauthorized={<SignInModal/>}
>
...
</MemberstackProtected>