Skip to main content

Example with Next.js

An example with Next.js is available in this dedicated repository as in this repository folder.

There are a couple of configuration and requirement to run Jupyter React in Next.js.

Yarn V3

You have to build with Yarn V3 (Npm or Pnpm do not work for now).

Render in client-mode

You need to render in client-mode the Jupyter part.

To achieve this, you can e.g. load your page with external components dynamically loaded.

import dynamic from 'next/dynamic'

const HomePageNoSSR = dynamic(
  () => import('../components/HomeComponent'),
  { ssr: false }
);

function Home() {
  return (
    <>
      <HomePageNoSSR />
    </>
  )
}

export default Home

The components should ideally reside outside of the app folder. Add 'use client' at the top of your React.js components.

'use client'

import { Jupyter, Notebook, CellSidebar } from '@datalayer/jupyter-react';

// ...

Add Require.js

For IPyWidgets support, you need requirejs on the page, so add a script tag to your layout to load the script from a CDN https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js.

import './globals.css'

import Script from 'next/script'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" />
      <body className={inter.className}>{children}</body>
    </html>
  )
}

CSS

We have seen that Jupyter React components places in the main tag of the default Next.js application are not shown (they have a width of 0).

For now, please place you components outside of the main Next.js CSS.

Enjoy!

Jupyter UI Next.js