Getting Started with Next.js


In your Next.js project, install Kitchen by running either of the following:

npm i @tonightpass/kitchen --save

Provider Setup

After installing Kitchen, you need to set up the KitchenProvider at the root of your application.

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and wrap the Component with the KitchenProvider:

// pages/_app.js
import { withKitchen } from "@tonightpass/kitchen/next";
function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
export default withKitchen(App);

Server Side Rendering

Now that everything is working you should be interested in Server Side Rendering.

Go to the next.config.js file and add the following:

// next.config.js
const { withKitchenConfig } = require("@tonightpass/kitchen/next");
const config = {
  // your next config
module.exports = withKitchenConfig(config);

Then, go to the pages/_document.js or create it if it doesn't exist and add the following:

// pages/_document.js
import { KitchenDocument } from "@tonightpass/kitchen/next";
export default class Document extends KitchenDocument {
  // your document

Deploy your own

Deploy the example using Vercel (opens in a new tab) or preview live with StackBlitz (opens in a new tab) or CodeSandbox (opens in a new tab).

Deploy with Vercel (opens in a new tab)

In addition, here is a complete project example (opens in a new tab) using Kitchen with Next.js.

Kitchen with Next.js Link

If you're using Next.js 13, we've provided a @tonightpass/kitchen/next package that gives you a smoother experience when using Kitchen Link component with next/link.


First of all, you need to import the Link component from the @tonightpass/kitchen package.

import { Link } from "@tonightpass/kitchen"


Using onClick


Non text


Fragment link (anchor)

Internal href

External href


NameTypeDefaultRequiredDescriptionAccepted values
hrefstring | UrlObject--The href of the link.-
localestring--The locale of the link.-
classNamestring--The classname of the link.-
onClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void--The click event handler of the link.-
disabledbooleanfalse-The status (disabled or not) of the link.-
variantstringprimary-The variant of the link.highlight, primary, secondary, blend