Nurturing Palpable Magnificence

    @nhost/nextjs
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.0 • Public • Published

    @nhost/nextjs

    Use Nhost with NextJS on SSR mode

    npm npm license: MIT

    The Nhost Next.js client exports a React provider for Next.js and React hooks that make it easier to work with Nhost in your Next.js app. The Next.js client is built on top of the Nhost React client and exports the same hooks and helpers.

    Documentation

    Installation

    Install the Nhost Next.js client, React client together with GraphQL:

    # With npm
    npm install @nhost/react @nhost/nextjs graphql
    
    # With Yarn
    yarn add @nhost/react @nhost/nextjs graphql

    Initializing

    Initialize a single nhost instance and wrap your app with the NhostNextProvider.

    import type { AppProps } from 'next/app'
    
    import { NhostClient, NhostNextProvider } from '@nhost/nextjs'
    
    const nhost = new NhostClient({
      subdomain: '<Your Nhost project subdomain>',
      region: '<Your Nhost project region>'
    })
    
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
          <Component {...pageProps} />
        </NhostNextProvider>
      )
    }
    
    export default MyApp

    Server-Side Rendering (SSR)

    You need to load the session from the server first from getServerSideProps. Once it is done, the _app component will make sure to load or update the session through pageProps.

    import { NextPageContext } from 'next'
    import React from 'react'
    
    import {
      getNhostSession,
      NhostSession,
      useAccessToken,
      useAuthenticated,
      useUserData
    } from '@nhost/nextjs'
    
    export async function getServerSideProps(context: NextPageContext) {
      const nhostSession = await getNhostSession('<Your Nhost Backend URL>', context)
    
      return {
        props: {
          nhostSession
        }
      }
    }
    
    const ServerSidePage: React.FC<{ initial: NhostSession }> = () => {
      const isAuthenticated = useAuthenticated()
      const user = useUserData()
      const accessToken = useAccessToken()
    
      if (!isAuthenticated) {
        return <div>User it not authenticated</div>
      }
    
      return (
        <div>
          <h1>{user?.displayName} is authenticated</h1>
          <div>Access token: {accessToken}</div>
        </div>
      )
    }
    
    export default ServerSidePage

    Apollo GraphQL

    You can use Apollo's GraphQL Client together with Next.js and Nhost.

    Installation

    # With npm
    npm install @nhost/react-apollo @apollo/client
    
    # With Yarn
    yarn add @nhost/react-apollo @apollo/client

    Initializing

    Wrap the Next.js app with the NhostApolloProvider and make sure the NhostApolloProvider is nested inside the NhostNextProvider.

    import type { AppProps } from 'next/app'
    
    import { NhostClient, NhostNextProvider } from '@nhost/nextjs'
    import { NhostApolloProvider } from '@nhost/react-apollo'
    
    const nhost = new NhostClient({
      subdomain: '<Your Nhost app subdomain>',
      region: '<Your Nhost app region>'
    })
    
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
          <NhostApolloProvider nhost={nhost}>
            <Component {...pageProps} />
          </NhostApolloProvider>
        </NhostNextProvider>
      )
    }
    
    export default MyApp

    Since Next.js is built on top of React you can read more about how to use Apollo and GraphQL in here.

    Install

    npm i @nhost/nextjs

    Homepage

    nhost.io

    DownloadsWeekly Downloads

    1,202

    Version

    1.9.0

    License

    MIT

    Unpacked Size

    802 kB

    Total Files

    15

    Last publish

    Collaborators

    • pilou
    • elitan
    • nunopato