Skip to content

Commit

Permalink
Move NextJS examples to framework-nextjs-* (keystonejs#8508)
Browse files Browse the repository at this point in the history
* Move nextjs examples to framework-

* update lock
  • Loading branch information
Josh Calder authored Apr 24, 2023
1 parent c87f9dc commit 333152e
Show file tree
Hide file tree
Showing 66 changed files with 107 additions and 142 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/tests_api.yml
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ jobs:
- uses: ./.github/actions/ci-setup

- name: Example Next in app direcroty build
run: cd examples/nextjs-keystone-app-directory; pnpm build
run: cd examples/framework-nextjs-app-directory; pnpm build

examples_smoke_tests:
name: Smoke Tests For Examples
Expand Down
8 changes: 4 additions & 4 deletions docs/pages/blog/nextjs-keystone.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ metaImageUrl: ""

Keystone is an excellent headless CMS that provides a GraphQL API to access your data. But did you also know that you could use **Keystone as a data layer within Next.js applications**? Yes, you don't need to host Keystone on a separate server. Keystone's entire data layer is so well abstracted that you could just import the `context` API in a Next.js application and CRUD your data. In other words, Keystone can be imported and used in serverless environments like Next.js routes, `getStaticProps` and `getServerSideProps`.

If you want to browse through the example code to understand how Keystone works within a Next.js application, we have built an example here [examples/nextjs-keystone](https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone).
If you want to browse through the example code to understand how Keystone works within a Next.js application, we have built an example here [examples/framework-nextjs-pages-directory](https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-pages-directory).

**Live Demo**: [Keystone + Next.js example in Vercel](https://nextjs-keystone-demo.vercel.app)

Expand Down Expand Up @@ -108,7 +108,7 @@ The entire application is just a **single Next.js application and can be deploye

This becomes useful in a handful of situations:

- **Demos**. When you're building a demo or a proof-of-concept, you can quickly prototype and build your application using [SQLite database](http://localhost:8000/docs/config/config#sqlite) and setup access control to be readonly. You will have a fully functioning demo with data without having to connect to an external database or a server. That's what we did with our [example](https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone). Try clicking the [**Deploy to Vercel** button](https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone) in the README and see it for yourself.
- **Demos**. When you're building a demo or a proof-of-concept, you can quickly prototype and build your application using [SQLite database](http://localhost:8000/docs/config/config#sqlite) and setup access control to be readonly. You will have a fully functioning demo with data without having to connect to an external database or a server. That's what we did with our [example](https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-pages-directory). Try clicking the [**Deploy to Vercel** button](https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-pages-directory) in the README and see it for yourself.
- **Serverless scale**. For production-grade applications, you don't have to worry about the scale or the infra of your application. You write the code and Vercel will automatically take care of scale for you.
- **Build fast user experiences**. Since you're directly querying your database from your Next.js server APIs (Eg. `getServerSideProps`) using Keystone's `context` API instead of making a http request, you can send your response faster to the browser.

Expand All @@ -121,7 +121,7 @@ That said, during development in your local machine, you will have access to the

## An example to get started

To make it easy to get started, we have built an example showing how you could use Keystone in Next.js applications. Check it out here [examples/nextjs-keystone](https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone). It is setup with auth, server rendering, custom GraphQL server in a Next.js route and everything you need to get started.
To make it easy to get started, we have built an example showing how you could use Keystone in Next.js applications. Check it out here [examples/framework-nextjs-pages-directory](https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-pages-directory). It is setup with auth, server rendering, custom GraphQL server in a Next.js route and everything you need to get started.

**Live Demo**: [Keystone + Next.js example in Vercel](https://nextjs-keystone-demo.vercel.app)

Expand All @@ -133,7 +133,7 @@ To sum it all up,
- **BYO GraphQL server**. You could setup your own GraphQL server using the generated Keystone GraphQL schema. This allows you to use Keystone with light weight serverless friendly GraphQL servers like [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server).
- **No need to deploy or maintain a separate infra for your API**. Keystone can be used within Next.js applications just like any other package.
- **Serverless friendly**. The path to serverless Keystone for us was abstracting our data layer with composable exports that would work with any serverless friendly node frameworks like Next.js.
- **Boilerplate example**. [examples/nextjs-keystone](https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone) is setup with auth, custom GraphQL server and server rendering to get started quickly.
- **Boilerplate example**. [examples/framework-nextjs-pages-directory](https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-pages-directory) is setup with auth, custom GraphQL server and server rendering to get started quickly.
- **No Admin UI**. Admin UI won't work when using Keystone within Next.js applications but the Keystone team is hard at work and we will soon have both the Keystone `context` API and Admin UI work within a single Next.js application. Until then, if having an Admin UI is not one of your top priorities, Keystone + Next.js is a great stack for what you're building.

That's all folks.
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/docs/examples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ export default function Docs() {
<Well
grad="grad2"
heading="Next.js + Keystone"
href="https://github.com/keystonejs/keystone/blob/main/examples/nextjs-keystone"
href="https://github.com/keystonejs/keystone/blob/main/examples/example-framework-nextjs-app-directory"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,4 @@ Both these apps connect to the same database and are built with the same source

Deploy this example to Vercel and see it for yourself.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkeystonejs%2Fkeystone%2Ftree%2Fmain%2Fexamples%2Fnextjs-keystone-app-directory)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkeystonejs%2Fkeystone%2Ftree%2Fmain%2Fexamples%2Fframework-nextjs-app-directory)
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@keystone-6/example-nextjs-keystone-app-directory",
"name": "@keystone-6/example-framework-nextjs-app-directory",
"version": "0.0.2",
"private": true,
"license": "MIT",
Expand Down Expand Up @@ -34,5 +34,5 @@
"prisma": "^4.13.0",
"typescript": "~5.0.0"
},
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone-app-directory"
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-app-directory"
}
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default async function HomePage() {
</em>
</p>
<p>
<a href="https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone-app-directory">
<a href="https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-app-directory">
Check out the example in the repo more info.
</a>
</p>
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,4 @@ Both these apps connect to the same database and are built with the same source

Deploy this example to Vercel and see it for yourself.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkeystonejs%2Fkeystone%2Ftree%2Fmain%2Fexamples%2Fnextjs-keystone)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkeystonejs%2Fkeystone%2Ftree%2Fmain%2Fexamples%2Fframework-nextjs-pages-directory)
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@keystone-6/example-nextjs-keystone",
"name": "@keystone-6/example-framework-nextjs-pages-directory",
"version": "0.0.2",
"private": true,
"license": "MIT",
Expand Down Expand Up @@ -33,5 +33,5 @@
"prisma": "^4.13.0",
"typescript": "~5.0.0"
},
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone"
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-pages-directory"
}
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const Home: NextPage = ({ users }: InferGetServerSidePropsType<typeof getServerS
</em>
</p>
<p>
<a href="https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone">
<a href="https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-app-directory">
Check out the example in the repo more info.
</a>
</p>
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Keystone Example - nextjs-keystone-two-servers
# Keystone Example - framework-nextjs-two-servers

An example of a frontend nextjs server and backend API server

Expand All @@ -14,7 +14,7 @@ pnpm

2. Start Keystone and Next.js servers

Navigate from repo root to `examples/example-nextjs-keystone-two-servers` and start the servers.
Navigate from repo root to `examples/framework-nextjs-two-servers` and start the servers.

```shell
pnpm dev
Expand All @@ -24,4 +24,4 @@ The GraphQL Server and Admin UI will start on [localhost:3000](http://localhost:

The Next.js server will start and the homepage will be served at [localhost:8000](http://localhost:8000).

_You can alternatively open two terminals and navigate to `examples/nextjs-keystone-two-servers/keystone-server` and `examples/nextjs-keystone-two-servers/nextjs-frontend` and run `pnpm dev` separately._
_You can alternatively open two terminals and navigate to `examples/framework-nextjs-two-servers/keystone-server` and `examples/framwork-nextjs-two-servers/nextjs-frontend` and run `pnpm dev` separately._
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ If everything works 🤞 the GraphQL Server and Admin UI will start on [localhos

## Try it out in CodeSandbox 🧪

You can play with this example online in [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL <https://githubbox.com/keystonejs/keystone/tree/main/examples/nextjs-keystone-two-servers/keystone-server>. You can also fork this sandbox to make your own changes.
You can play with this example online in [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL <https://githubbox.com/keystonejs/keystone/tree/main/examples/framework-nextjs-two-servers/keystone-server>. You can also fork this sandbox to make your own changes.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "@keystone-6/example-nextjs-keystone-two-servers-backend",
"name": "@keystone-6/example-framework-nextjs-two-servers-backend",
"description": "An example of a Keystone backend API server",
"version": "0.0.4",
"private": true,
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone-two-servers/keystone-server",
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-two-servers/keystone-server",
"scripts": {
"dev": "keystone dev --seed-database",
"start": "keystone start --seed-database",
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "@keystone-6/frontend-example-nextjs-keystone-two-servers-frontend",
"name": "@keystone-6/frontend-example-framework-nextjs-two-servers-frontend",
"description": "An example nextjs frontend",
"version": "0.1.0",
"private": true,
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone-two-servers/nextjs-frontend",
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-two-servers/nextjs-frontend",
"scripts": {
"dev": "next dev --port 8000",
"build": "next build",
Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "@keystone-6/monorepo-example-nextjs-keystone-two-servers",
"name": "@keystone-6/monorepo-example-framework-nextjs-two-servers",
"description": "An example of a frontend nextjs server and backend API server",
"version": "0.0.1",
"private": true,
"author": "Dinesh Pandiyan <flexdinesh@gmail.com>",
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/nextjs-keystone-two-servers",
"repository": "https://github.com/keystonejs/keystone/tree/main/examples/framework-nextjs-two-servers",
"scripts": {
"dev": "concurrently \"cd keystone-server && pnpm dev\" \"cd nextjs-frontend && pnpm dev\""
},
Expand Down
Loading

0 comments on commit 333152e

Please sign in to comment.