Skip to content

Commit

Permalink
Update embedded-mode-with-sqlite-nextjs.mdx (keystonejs#6444)
Browse files Browse the repository at this point in the history
  • Loading branch information
bladey authored and Nikitoring committed Sep 14, 2021
1 parent e189d3a commit e03ca8f
Showing 1 changed file with 23 additions and 21 deletions.
44 changes: 23 additions & 21 deletions docs/pages/docs/walkthroughs/embedded-mode-with-sqlite-nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,28 +40,22 @@ Here's what we're going to do:

## Setup a Next.js app

x> **Warning:** We normally advise to set up a new Next.js app with `yarn create next-app --typescript my-project`, however this will install Next.js `11.x`. This version isn't compatible with this guide until we upgrade Keystone's Next.js internals to `11.x`.

x> To continue, you'll need to use Next.js `10.x` until this upgrade is completed. We've set up a repository below using Next.js `10.x` you can clone in the mean time.

Clone the basic Next.js project below.
Create a basic Next.js project with the `--typescript` option in an empty directory.

```bash
git clone https://github.com/keystonejs/embedded-mode-with-sqlite-nextjs
cd embedded-mode-with-sqlite-nextjs
yarn create next-app --typescript my-project
cd my-project
```

Then run `yarn` to install the dependencies.

!> Keystone 6 has great TypeScript support. Including it in your project will make it easier to use Keystone’s APIs later.

Delete the `/pages/api` directory. We’ll add a GraphQL API later in the tutorial. Your `/pages` directory should now look like this:

```text
.
└── pages
   ├── _app.tsx
   └── index.tsx
├── _app.tsx
└── index.tsx
```

### Start your local server
Expand All @@ -81,7 +75,7 @@ Now that we have the Next.js starter with static files, let‘s embed Keystone i
Add the following Keystone dependencies to your project:

```bash
yarn add @keystone-next/keystone @keystone-next/keystone/fields
yarn add @keystone-next/keystone @keystone-next/fields
```

### Update .gitignore
Expand All @@ -103,8 +97,8 @@ To create and edit blog records in Keystone’s Admin UI, add a `keystone.ts` [c
```tsx
// keystone.ts

import { config, list } from '@keystone-next/keystone';
import { text } from '@keystone-next/keystone/fields';
import { config, list } from '@keystone-next/keystone/schema';
import { text } from '@keystone-next/fields';

const Post = list({
fields: {
Expand All @@ -128,18 +122,25 @@ export default config({

### Add Keystone to Next.js config

Add a `next.config.js` file to your project root with the following:

```tsx
Edit the `next.config.js` file in your project root with the following:

```diff
// next.config.js

const { withKeystone } = require('@keystone-next/keystone/next');
/** @type {import('next').NextConfig} */

- module.exports = {
- reactStrictMode: true,
- }

+ const { withKeystone } = require("@keystone-next/keystone/next");

module.exports = withKeystone();
+ module.exports = withKeystone({
+ reactStrictMode: true,
+ });
```

This is where the magic happens – the `withKeystone` function lets Next.js encapsulate Keystone in its script runtime, while Keystone still operates independently of the Next.js frontend ✨
This is where the magic happens – the `withKeystone` function lets Next.js encapsulate Keystone in its script runtime, while Keystone still operates independently of the Next.js frontend ✨

### Update package scripts

Expand All @@ -149,8 +150,9 @@ Finally, make a small change to the `scripts` object in `package.json` to includ
"scripts": {
+ "postinstall": "keystone-next postinstall",
"dev": "next dev",
"build": "next build",
"start": "next start",
"build": "next build"
"lint": "next lint"
},
```

Expand Down

0 comments on commit e03ca8f

Please sign in to comment.