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 { KitchenProvider } from "@tonightpass/kitchen";
 
function App({ Component, pageProps }) {
  return (
    <KitchenProvider>
      <Component {...pageProps} />
    </KitchenProvider>
  );
}
 
export default 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.