Headless Silverstripe with Next JS

Combine the fast user experience and component reusability of React.js with the SEO benefits of server side rendered markup using Headless Silverstripe CMS with Next JS

Code repository

Setting up your local environment

Altough a development environment can be set up without it, it is recommended to use Docker or something similar. The configuration bellow will add the necessary services to run Silverstripe and Next, as well as an nginx proxy to direct the requests to the correct service and install dependencies.

Create a Silverstripe and Next project

  1. Add a mysilverstripeapp directory to the root of your project folder and create a Silverstripe project by running the following command.
    docker-compose run --rm silverstripe composer create-project silverstripe/installer .
  2. Create a Next JS project by running the following in the root of your project directory. 
    docker-compose run --rm node npx create-next-app next
  3. Add the following section to your mysilverstripeapp/composer.json 
    "repositories": [
      {
    "type": "vcs",
    "url": "https://github.com/olivernorden-silverstripe/silverstripe-headless-rest-api"
      }
],
  4. Install the rest api by running the following command in your project root. 
    docker-compose run --rm silverstripe composer require olivernorden/silverstripe-headless-rest

Start your development environment

  1. Run the following to start your local development environment.
    docker-compose up -d
  2. Run the following to build your Silverstripe database. 
    docker-compose run --rm silverstripe php vendor/silverstripe/framework/cli-script.php dev/build
  3. You should now be able to access a boiler plate Next application on http://localhost and the Silverstripe admin interface on http://localhost/admin using the default credentials admin:password.

Adding additional fields to the api

Add the following file to the Silverstripe configuration to expose additional fields in the api. The fields bellow will be required for the boiler plate Next app. More information about extending the api can be found on Github. The new fields should be visible by accessing http://localhost/headless-api/v1/url?flush.

Connect Next to Silverstripe

Add/Modify the files to match the structure bellow. This will fetch page and navigation data from Silverstripe and pass it to your page component. You should now be able to see a Next boiler plate application that fetches data from Silversrtripe.

Adding more page types

Page models are added as normal in Silversrtipe. A react component will have to be added to /myapp/next/pagetypes, imported and added to the PageTypes object in [...slug].js with a key that matches the Silverstripe page model class name.