Getting Started with Next.js

Installation

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).

(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.

Usage

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

import { Link } from "@tonightpass/kitchen"

Default

Using onClick

Disabled

Non text

Variants

Fragment link (anchor)

Internal href

External href

Props