Next.js Integration Guide

This tutorial will guide you through the steps required to pull content from LexasCMS into your Next.js website.

The tutorial assumes that you’re using create-next-app and that you have a basic understanding of Next.js and its concepts. If you’re new to Next.js, we highly recommend checking out the official documentation before proceeding.

Create your website

Create a new Next.js application by running one of the following commands:

# If using Yarn
yarn create next-app nextjs-lexascms-tutorial

# If using NPM
npx create-next-app nextjs-lexascms-tutorial

Navigate into your website directory

After you have created your website, navigate into the websites directory.

cd nextjs-lexascms-tutorial

Install graphql-request package

In this guide we’re going to be requesting data from LexasCMS using the GraphQL content delivery API.

There are many packages that you can choose from to fetch content from LexasCMS’s GraphQL API. Some of the most popular options include Apollo, axios and graphql-request.

For this guide, we’re going to be using graphql-request. Install the package (and its graphql peer dependency) by running one of the following commands:

# If using Yarn
yarn add graphql-request graphql

# If using NPM
npm install --save graphql-request graphql

Create LexasCMS request module

Next we’re going to create a small module which can be imported whenever we need to request some content from LexasCMS.

In the root of your websites directory, create a new directory called lib and then within the new directory create a file named lexascms.js with the following contents:

import { request as graphqlRequest } from "graphql-request";

export function request({ query, variables }) {
  // Define space ID
  // Outside of this tutorial, you would replace this with your own
  // space ID
  const spaceId = 'bc4c2f6d-7297-4857-8bb2-dd55e80bf5e6';
  // Define LexasCMS API Endpoint
  const apiEndpoint = `https://${spaceId}.spaces.lexascms.com/delivery/graphql`;
  // Send request
  return graphqlRequest(apiEndpoint, query, variables);
}

The request method exported from this module simply takes the provided query and variables, and then constructs a request which is sent to LexasCMS’s GraphQL content delivery API.

The response is then returned, allowing you to display and use the content however you choose.

Fetch your content

You should now be able to import the module that you created in the previous step and use it to fetch content from LexasCMS.

Note

The below example assumes that there is a blogPost content type with a title field defined in your space.

Open the pages/index.js file and replace the contents with the following code:

import { request } from '../lib/lexascms';

const blogPostsQuery = `
  query {
    blogPostCollection {
      items {
        title
      }
    }
  }
`;

export async function getStaticProps() {
  // Fetch blog posts from LexasCMS
  const result = await request({ query: blogPostsQuery });
  // Return props
  return {
    props: {
      blogPosts: result.blogPostCollection
    }
  };
}

export default function Home({ blogPosts }) {
  return (
    <div>
      <h1>My Next.js Blog</h1>
      <p>Welcome to my Next.js blog.</p>
      <ul>
        {blogPosts.items.map(blogPost => (
          <li>{blogPost.title}</li>
        ))}
      </ul>
    </div>
  )
}

This code does the following: