Skip to main content

Fetching Enterspeed-data in Next.js

For this tutorial, we assume you already have some knowledge of setting up a Next.js-project. If not, you can read the getting started guide here:

Setting up the demo project

If you don't wish to set up the demo project, simply skip this step.

Go to GitHub ( and clone the project.

cd into the next folder and run:

npm install
npx next dev

Create a file called .env.local and insert your environment API key generated in the Enterspeed-app under Environments like this:


// If you're using preview-mode, also insert the following:

For a production environment, your API key should be injected on build time.

Ways of fetching data

Fetching data from Enterspeed can be done in three different ways:

  • By using Handle
  • By using URL
  • By using ID

On our demo site, we’ve used handle and URL.

Handle and ID are good ways of fetching data for “non-site-specific data”, e.g. the navigation. In our demo, we’re using the handle method to fetch the navigation.

We’re using the URL method to fetch all of our content- and product pages.

When the data is fetched you can choose to either generate it client-side, server-side, or at build time. In or demo we have used all three methods to illustrate this:

  • The navigation is generated at build time.
  • The products are generated client-side.
  • Our homepage is generated server-side.

Data can be fetched using the Fetch API or a library like Axios.


You can read more about fetching data in Next.js here:

In our demo, we have made a component that fetches the data. You’ll find it in the project under “app/lib/enterspeed.js”. The components look like this:

Example: enterspeed.js
const call = async (query, preview) => {
const url = `${query}`;
const response = await fetch(new Request(url), {
headers: {
"Content-Type": "application/json",
"X-Api-Key": preview

return response.json();

export const getByHandle = async (handle, preview) => {
const response = await call(`handle=${handle}`, preview);
return response.views[handle];

export const getByUrl = async (url, preview) => {
const response = await call(`url=${url}`, preview);
return response.route;

How to generate content dynamically

In order to generate our content dynamically (this can be pages, blog posts, products, etc.) we need to create a component that does this for us.

Luckily Next.js supports Dynamic Routes, meaning our slugs can get generated dynamically.

In our demo project, we have created a file called [..slug].js. You will find it in the pages folder (you can also view it below).

In the file, you'll find the following functions:

  • getStaticPaths: Fetches the routes that need to get build.
  • getStaticProps: Fetches the data for each route that needs to get build.
  • buildPaths: Sends the navigation paths to the generateNavBarPaths function.
  • generateNavBarPaths: Generates the navigation.
  • generateSubMenu: Generates the submenus.
  • Content: Inserts the data in a JSX-component.
import Entity from "../components/Entity";
import { getByHandle, getByUrl } from "../lib/enterspeed";

const paths = [];

const generateSubMenu = (children) => {
children.forEach((child) => {
params: { slug: child.href.split("/").filter((a) => !!a) },

if (child.children) {

const generateNavBarPaths = (navigation) => {
if (navigation) {
navigation.forEach((nav) => {
params: { slug: nav.view.href.split("/").filter((a) => !!a) },

if (nav.view.children) {

const buildPaths = (navigation) => {

return paths;

export async function getStaticPaths() {
const data = await getByHandle("navigation");

return {
fallback: "blocking",

export async function getStaticProps({ params, preview }) {
const data = await getByUrl(

return {
props: {
view: data,
preview: preview || null,
revalidate: 60,

const Content = ({ view }) => {
return <Entity view={view} />;

export default Content;