Using with Next 13

Pando is compatible with Server components out of the box by providing plain CSS.

NextJS is a powerful tool that allows developers to build custom React apps that utilize the power of server rendering.

In version 13, the Next team decided to restructure the project to use Server Components which means that if you would like to take advantage of this feature, you will need to take a slightly different approach to your development.

This article assumes you are already familiar with Next 13. If you are not, we recommend you learn the fundamentals before continuing.

Setup

There is no additional setup required for NextJS outside of the first two steps in the Adding Pando to a website page.

Using Server Components

When you are building components that don't require any client-side features from React, you can use any API provided by the Headless-styles or most all from the React package (i.e. we have some client-only components).

Knowing when to use Server Components

In order to determine whether you should use a Server Component or Client is easier than it seems.

Server Components should be used when a component doesn't require any React hooks/events.

This means, if you have a component that doesn't use any hooks or click events, you can and should use a Server Component to help performance.

In this example, we are creating a global Nav Server Component:

import { Grid, GridItem, Icon } from '@pluralsight/react'
import { HomeIcon, BriefcaseIcon } from '@pluralsight/icons'
import Link from 'next/link'
import { type PropsWithChildren } from 'react'
import styles from './nav.module.css'

function NavListItem(props: PropsWithChildren<{}>) {
  return (
    <GridItem className={styles.listItem} cols="6">
      {props.children}
    </GridItem>
  )
}

interface NavLinkProps {
  href: string
  icon: any
}

function NavLink(props: PropsWithChildren<NavLinkProps>) {
  return (
    <Link href={props.href}>
      <Icon icon={props.icon} />
      {props.children}
    </Link>
  )
}

export default function Nav() {
  return (
    <nav className={styles.container}>
      <Grid className={styles.navList} cols="12" gap={6}>
        <NavListItem>
          <NavLink href="/" icon={HomeIcon}>
            Home
          </NavLink>
        </NavListItem>

        <NavListItem>
          <NavLink href="/work" icon={BriefcaseIcon}>
            Work
          </NavLink>
        </NavListItem>
      </Grid>
    </nav>
  )
}

Using Client Components

Whenever you need to build a component that uses advanced React functionality like hooks or click events, you can use any of the Headless-styles or React APIs.

Here is an example of creating a Button Client Component:

'use client'

import { Button } from '@pluralsight/react'
import type { HTMLProps, PropsWithChildren } from 'react'

export default function SomeFeature(props: PropsWithChildren<{}>) {
  const { children, onClick, ...btnProps } = props

  return (
    <Button {...button} onClick={props.onClick}>
      {props.children}
    </Button>
  )
}