https://github.com/storyblok/react-next-boilerplate
Nextjs Storyblok boilerplate
https://github.com/storyblok/react-next-boilerplate
demo devrel nextjs
Last synced: 5 months ago
JSON representation
Nextjs Storyblok boilerplate
- Host: GitHub
- URL: https://github.com/storyblok/react-next-boilerplate
- Owner: storyblok
- Created: 2018-07-23T13:13:48.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T23:06:12.000Z (about 2 years ago)
- Last Synced: 2024-04-14T23:59:52.770Z (over 1 year ago)
- Topics: demo, devrel, nextjs
- Language: JavaScript
- Homepage: https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes
- Size: 83 KB
- Stars: 61
- Watchers: 12
- Forks: 34
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Storyblok Boilerplate
This repository is a Next.js [Storyblok](https://www.storyblok.com) starter template used in following [5 minute tutorial](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes).
## Requirements
To use this project you have to have a Storyblok account. If you don't have one yet you can register at [Storyblok](https://www.storyblok.com), it's free.
## How to get started?
Read the [Next.js tutorial](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes) about connecting Storyblok and Next.js
### 1. Clone the repo
```sh
$ git clone https://github.com/storyblok/react-next-boilerplate.git
```
### 2. Install all dependecies
```sh
$ yarn # or npm install
```
### 3. Adding the Access token
Create a new empty Space and exchange the preview token with your own in ```pages/_app.js```.
```js
// in pages/_app.js
storyblokInit({
accessToken: "your-preview-token",
use: [apiPlugin],
components,
});
```
### 4. Run your project
Set the preview domain in Storyblok to `http://localhost:3000/`
```sh
# to run in developer mode
$ yarn dev # or npm run dev
```
```sh
# to build your project
$ yarn build # or npm run build
```
## Resources
- [Next.js docs](https://nextjs.org/docs/#setup)
- [Storyblok Tutorial](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes)
- [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)