NextJS
Getting started guide for using Pokko with NextJS websites
Pokko provides a GraphQL endpoint for querying content that integrates with any platform that can consume data coming from such an endpoint.
Using the content hierarchy feature of Pokko you can easily map content in Pokko to web pages on your website.
The website for Pokko - pokko.io - is a NextJS website with Typescript connected to Pokko. You can view the source code for the site here.
It's worth noting that the guide below isn't necessarily tied to NextJS, but could apply to any Javascript-based application.
Getting started
The simplest way to connect NextJS to Pokko is to add a thin API layer using the Apollo GraphQL client.
Start by adding the required dependencies.
Then create a file somewhere in your project; we tend to use lib/pokko.ts
in our projects.
This expects the environment variables for POK_ENVIRONMENT
, POK_PROJECT
and POK_TOKEN
. These can go into your .env
file.
aWith that, you can query content using the client
export from this file, it will provide you with a raw GraphQL interface to query content.
Code generation
We like to use a library called GraphQL Codegen that allows us to write GraphQL queries and store them in .graphql
files that are then validated against the Pokko API and then output into Typescript files for easier consumption.
It only takes a few moments to configure but will save you tonnes of time in the long run.
Start by installing the dependencies.
Then create a codegen.yml
file alongside your package.json
with the contents below. You can put these files wherever you like, this is just how we set things up.
The URL on line 2 can be found by following the steps here, the URL for the "GraphQL Playground" is what will go here.
This will look for .graphql
files in the pokko/queries
folder and output the generated Typescript to pokko/queries.ts
This also looks for your API key in your environment variables, you can create a .env
file with POK_TOKEN=<< API TOKEN >>
alongside the codegen.yml
file.
With this in place, you can run yarn run graphql-codegen
to generate the Typescript file.
There is one extra piece needed if you use data model inheritance, that is to update your lib/pokko.ts
file to the following.
Last updated