https://github.com/acquia/sitestudio-nextjs-example
Nextjs example for consuming Site Studio JSON:API
https://github.com/acquia/sitestudio-nextjs-example
no-cortex no-pipeline no-sonarqube
Last synced: about 2 months ago
JSON representation
Nextjs example for consuming Site Studio JSON:API
- Host: GitHub
- URL: https://github.com/acquia/sitestudio-nextjs-example
- Owner: acquia
- Created: 2023-09-27T13:29:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-05T15:27:41.000Z (over 1 year ago)
- Last Synced: 2024-04-14T06:29:50.055Z (about 1 year ago)
- Topics: no-cortex, no-pipeline, no-sonarqube
- Language: JavaScript
- Homepage:
- Size: 136 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# About
This very simple example shows how JSON:API and Site Studio can be leveraged to generate a static site with Next.js
The example is hooked up to a Drupal site that has a number of nodes each with a Site Studio layout canvas and the JSON:API enabled.
The example fetches the list of nodes and their Layout Canvas data and uses it to build a list of recipes and, for each recipe, renders some components based on the configuratin defined on the Layout Canvas in Drupal.
# Configuration
In next.config.js the hostname and pathname have been set to allow Next.js to download/resize images at build time.
# Getting started
## Next.js
Fork or clone this repo
In the top directory run `npm run dev`
The site should spin up on [http://localhost:3000/](http://localhost:3000/).
## Drupal
While the application is hardcoded to point to a live Drupal example site, you may wish to point it to your own so you can alter settings.
- You will need to create a **Drupal 10** site with **Site Studio 7.4.0** or later.
- You need the JSON:API module enabled
Create some components in Site Studio. Don't worry about adding elements to the Layout Canvas - you simply need to add fields to the Component Form Builder and ensure they have machine names set.
Now create a Node on your Drupal site with a Layout Canvas field and add your components to it.
## Access the Layout Canvas data via JSON:API
Inside `/lib/posts.js` you can find a (hard coded) example of how to access the JSON:API to pull out the list of Nodes (`getAllPostsData()`) and then the Layout canvas from a specific node (`getPostData(id)`).
Based on the Next.js starter template at [Learn Next.js](https://nextjs.org/learn).