Docs Developer Site
DeveloperDocsNext.xpStableSites

Sites

Contents

In this chapter, you’ll build a tree structure of your content, with a site item at the root + learn about a handy trick for the GraphQL API.

Introduction

Next.XP is built to provide complete control over a website, including landing pages and the URL structure. For this use-case, Content Studio’s tree structure will come in handy.

Task: Creating the site

Next.XP needs a root content item. This item will act as the front-page of your site.

Before you continue, clear all selections in the Content Studio list view (this way the site content will be placed on the project root).

  1. Create a new item by clicking New in Content Studio toolbar, then select the Site content type. This will open the content editor in a new tab.

  2. Give the site a name by filling in a display name for the site, "HMDB" (short for Headless Movie DB) will do fine.

    If you choose a different name, make sure the site path name (seen below the Display name) is set to hmdb - as this will be used throughout the tutorial.

  3. Add the Movie DB app to the site - by selecting it in the Applications form field.

    Sites acts as scopes in the content structure. By adding an app to the site, you effectively allow editors to create content based on the app within this scope.

    content studio create site

    When completed, your form should look something like this, and you can now press Save in the toolbar.

    This will leave the item in In progress state, which is ok for now.

Add content

To quickly get some content and structure within the site, let’s move the Movie DB content into the site.

  1. Select the folders in the list, and click Move from the toolbar.

  2. Selecting the HMDB site as the target and click Move once more.

    content studio move

  3. Wrap up by publishing the changes. Select the site (root item) in the tree structure, and click Mark as ready…​ in the top right action button. This will bring up the Publishing Wizard.

    content studio mark as ready

  4. To publish the entire new tree structure select the hierarchy icon to the left of the site. This will expand to include all items that have been moved as well. Then click Publish Now

    content studio publish

Sweet, you should now have a site with content and a basic tree structure.

Task: Site contextual queries

In GraphQL queries, you may use a so-called "site context". This is activated by passing an HTTP header along with the query.

  1. Specify header

    Back in Query Playground, open the Request Headers panel at the bottom, and add the following configuration:

    Configure HTTP headers 
    {
  "X-Guillotine-SiteKey": "/hmdb"
}
    SiteKey can be either path, or the site’s unique ID. A benefit of using the ID is that you can change the name and path of the site, without affecting your queries.

  2. Run a query with the site context

    One of the new features you get from the site context is the ${site} placeholder, which can be used in paths. Update your Query Variables as follows, and run the movie query from the previous chapter once more:

{
    "path": "${site}/movies/se7en"
}
Here, ${site} will resolve to the path of the site and expand - in this case the full path will be expanded to /hmdb/movies/se7en.

Coming up - get your your Next.js developer environment up and running.

Contents

Contents