Documentation
Frameworks
Next.js (App Router)

Getting Started with Next.js (App Router)

Automatic Installation

Template

To generate the starter template for your Next.js project, run the following command:

npx create-next-app@latest --example https://github.com/tonightpass/kitchn/tree/master/examples/next-app my-next-kitchn-app
 
cd my-next-kitchn-app
npm run dev

What's Included

This template is similar to the default Next.js template, but with Kitchn pre-installed.

Pre-install dependencies

  • kitchn
  • next
  • react
  • react-dom

Manual Installation

Installation

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

npm i kitchn --save

Provider Setup

After installing Kitchn, you need to set up the KitchnRegistry and KitchnProvider at the root of your application.

Go to app/layout.js or app/layout.tsx (create it if it doesn't exist) and wrap the KitchnProvider with the KitchnRegistry and the children with the KitchnProvider:

// app/layout.js
import { KitchnProvider } from "kitchn";
import { KitchnRegistry } from "kitchn/next";
 
export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <KitchnRegistry>
          <KitchnProvider>{children}</KitchnProvider>
        </KitchnRegistry>
      </body>
    </html>
  );
}

We also need to add suppressHydrationWarning to the html tag to avoid the warning message (opens in a new tab).

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 { withKitchnConfig } = require("kitchn/next");
 
const config = {
  // your next config
};
 
module.exports = withKitchnConfig(config);

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 Kitchn with Next.js.

React NativeNext.js (Pages Router)