Integration ‐ Next 14

Installation

Please install the following JET dependencies (examples use yarn but feel free to use npm if preferred):

yarn add @justeattakeaway/pie-css @justeattakeaway/pie-webc @justeattakeaway/pie-icons-webc

And the following third party dependencies:

yarn add @lit-labs/nextjs @lit/react

Setup

CSS and Design Token variables

You should import pie-css into your root component file (or wherever you prefer) so that the variables it provides are globally available (some of these variables are used by the component styles):

// Example - /src/app/layout.tsx
import '@justeattakeaway/pie-css';

For more information on pie-css please take a look at the package readme

Typography

We have a dedicated page which explains how to set up typography. In short, you need to install the JET fonts and set up the appropriate font-face CSS code.

NextJS config

We need to update our next.config.js file to enable server-side rendering (SSR).

Example minimal config file:

// Example - ./next.config.js
const withLitSSR = require('@lit-labs/nextjs')();

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
}

module.exports = withLitSSR(nextConfig);

Usage

Note: If you are using the app router structure, please ensure you add "use client" to the top of the files that directly import the PIE components. This does NOT prevent SSR, it just means that PIE components cannot be used directly in React server-components.

It is recommended to import all components from pie-webc. For React-based applications, there is a /react/ entry point as shown in the example code below:

"use client"

import { PieButton } from "@justeattakeaway/pie-webc/react/button.js";
import { PieLink } from "@justeattakeaway/pie-webc/react/link.js";
import { IconCamera } from "@justeattakeaway/pie-icons-webc/dist/react/IconCamera";

export default function SomeComponent() {
    return (
        <div>
            <PieButton size="small-productive" iconPlacement="leading">
                <IconCamera slot="icon"></IconCamera>
                Camera Button
            </PieButton>
        </div>
    );
}

You should now be able to use any components you need in your NextJS application!

Please reach out to us if you have any troubles or spot any errors in our guide.