NextJS 13 + Storyblok CMS 🐸 TypeScript ✅ TailwindCSS🍃 Storybook 📚

Overview

NextJS 13 - Storyblok Starter

Front-end result StoryBlok CMS View Step by Step setup Tutorial

[NEW] Here comes the Step-by-Step setup Storyblok starter tutorial 🤩 ✍️ !

Find a relative Medium blogpost here: https://medium.com/@liegearthur/nextjs-13-manage-your-content-using-storyblok-cms-a-clean-repository-starter-1362b9db303f

Disclaimer :

What's inside the box ?

  • Demo pages with Header / Footer / HeadingBlok / TestimonialsSlider / SEO, managed by Storyblok CMS.
  • Storyblok setup with custom Bridge.
  • pages/[[...slug]].tsx file that handles all pages of your application: all Page ressources in Pages directory on the CMS will generate a new NextJS page.
  • Handle 404 and 500 errors with design coming from CMS, based on : NextJS Doc - Handling Server Errors.
  • Auto generated sitemap.xml after each build.
  • .gitlab-ci.yml to deploy your App + your Storybook on Netlify from self-hosted Gitlab.
  • TypeScript: CMS types are auto-generated, and used on components/blocks/. Components are typed.
  • TailwindCSS basic setup.
  • Simple atomic design inside components/lib/ with few components based on TailwindUI.
  • Storybook setup with next/image and next/router mocks. All components have their own story.
  • A Frog friendly interface 🐸

Many of things you will see in this repository are opinionated: feel free to change anything!

Command cheat sheet

  • yarn dev: Start the app on localhost:3000 and the https proxy on https://localhost:3010.
  • yarn storybook: Start storybook to see the stories of your components.
  • yarn build: Build your application using default NextJS build.
  • yarn start: Start the last build you have done (production mode).
  • yarn lint:fix: Clean your code using eslint.
  • yarn storyblok-pull-components: Update the local schema of your components: used to generate TypeScript types.
  • yarn storyblok-generate-types: Generate TypeScript type

External dependencies

Storyblok asks for a https certificat to ensure that the bridge can connect and that you can preview your website in Storyblok CMS.

You NEED to have HTTPS Proxy Certificates at the root of your project:

# HTTPS Proxy certificates
localhost.pem
localhost-key.pem

I used mkcert to generate my .pem files, following this tutorial (also working on Linux): Setting up Dev Server with HTTPS Proxy On Windows

These are used inside package.json to start the dev on port :3000 and an SSL proxy on port :3010.

"start-ssl": "local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem",

Disclaimer : Here local-ssl-proxy is installed globally.

Feel free to replace mkcert and local-ssl-proxy by any package you want !

Getting started

Your application will not start without a simple setup inside StoryBlok CMS. Check there how to do it: Documentation : How to set up your StoryBlok CMS.

Clone and fill .env.local file (see Environnement variable section):

cp .env.example .env.local

Install dependencies

yarn

Modify references to your Storyblok Workspace:

package.json:

"storyblok-pull-components": "storyblok pull-components --space=XXXXXX",
"storyblok-push-components": "storyblok push-components ./components.XXXXXX.json --space=XXXXXX",
"storyblok-generate-types": "storyblok-generate-ts source=./components.XXXXXX.json target=./types/storyblok-types",

And also these files name:

./components.XXXXXX.json
./presets.XXXXXX.json

Push the schemas for Header / Footer / HeadingBlok / TestimonialsSlider / SEO (it will ask for email/password):

storyblok-push-components

If you encounter an issue with your StoryBlok (like a timeout or a refused access), try this command:

npx storyblok logout

Now, you can start to modify things on StoryBlok CMS. Each time you want to regenerate the TypeScript to be in sync with your CMS, do:

yarn storyblok-pull-components
yarn storyblok-generate-types

Warning : Last recommendation to check Storyblok Official Tutorial : NextJS.

How to set up things on your StoryBlok CMS ?

There is a full illustrated tutorial here: How to init Storyblok CMS to work with "NextJS 13 - Story Blok Starter"

There is also a dedicated README.md that explains what you need to do on the CMS starting this point!

You can find it here: Documentation : How to set up your StoryBlok CMS

I am stuck in the code, can you help me ?

There is a dedicated documentation TECH.md that explains some not obvious things about this repository (FAQ).

You can find it here: Documentation : Hint and Tips about not obvious things

Environnement variable

Name Description Example
REACT_STORYBLOK_ACCESS_TOKEN API key from storyblok dashboard (Settings / Access Tokens). b373-ed708fab45f4
STORYBLOK_SECRET_TOKEN Your custom key used in api/revalidate to check if the webhook is coming from storyblok (Settings / Webhooks). IZtrIZ3_D2bl1isr2gtt
ENV_BASE_URL Domain name to generate the right sitemap.xml acme.com
PREVIEW_SECRET_TOKEN Your custom key used in api/preview to check if user is authorized to preview. fd27e842-8e70

How to get your API key: Create / Get an API key.

Deploy

This repository can be easily deployed on Vercel and Netlify if you git repository is on GitHub or on the public Gitlab : These 2 providers can be connected directly to your git repository: you will not need any configuration in .gitlab-ci.yml.

Additional variables to add to your CI to deploy on Netlify (self-hosted Gitlab):

Name Description Example
NETLIFY_AUTH_TOKEN Authentication token given on Netlify. 8fd27e8sr2gt1rIZ
NETLIFY_DEV_SITE_ID Site ID of your app (that you can find after creating a site inside Netlify). 0348535
NETLIFY_STORYBOOK_SITE_ID Site ID of your Storybook (that you can find after creating a site inside Netlify). 0348535

Resources

You might also like...
Boilerplate for projects using Next, React, Typescript, Styled Components, Framer Motion, Storybook, Jest and Testing Library
Boilerplate for projects using Next, React, Typescript, Styled Components, Framer Motion, Storybook, Jest and Testing Library

Boilerplate for projects using Next, React, Typescript, Styled Components, Framer Motion, Storybook, Jest and Testing Library

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups
React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

🔷 My lovely portfolio built with React, NextJS, and TailwindCSS

Hey there! I'm Brayden and this is my lovely lovely portfolio built using React, NextJS, and TailwindCSS!

😊 NextJS Template with Tailwindcss, Eslint, Prettier.

Next.js + Tailwind CSS Example By Pedromdsn Deploy your own Deploy the example using Vercel or preview live with StackBlitz How to use Execute create-

react redux for CMS/Enterprise class App/ERP/Admin with ant-design
react redux for CMS/Enterprise class App/ERP/Admin with ant-design

Feature List hot reloading/browser-sync/redux devtools on dev build minify/chunkhash/trackJS on production build eslint both of terminal and pre-commi

This is a boilerplate using webpack, react, redux, typescrpit, storybook

BOILERPLATE What's Included redux redux-persist redux middleware [Thunk & logger] redux toolkit redux devtools extentions types for react state, dispa

This is a very simple boilerplate made with CRA, React Router, Styled Components and Storybook.

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

Simplify the creation of Storybook addons
Simplify the creation of Storybook addons

Storybook Addon Kit Simplify the creation of Storybook addons 📝 Live-editing in development ⚛️ React/JSX support 📦 Transpiling and bundling with Bab

Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates
Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates

Stablo Blog Template - Next.js & Sanity CMS Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. Clic

Owner
Liège Arthur
Fullstack Dev 💻 JS Expert (React / Next) 💾 Zap d'Astrub enjoyer ⛩️
Liège Arthur
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

Muhammad Ridho Anshory 13 Oct 19, 2022
Storybook-addon-message-bus - Interact with message bus via Storybook UI

Storybook Addon Message Bus Storybook Addon w/ GUI for interacting with Message

Prashis 2 Jan 8, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

React Avançado 25 Nov 27, 2022
NextJS Starter Example for Running Zesty.io CMS

Zesty.io + NextJS Getting Started Node and NPM need to be installed. From your command line.

Zesty.io 8 May 31, 2022
NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

null 2 Nov 7, 2022
Use vitejs, storybook and typescript to build great react components and documents.

react-component-storybook Use vitejs, storybook and typescript to build great react components. Just click Use this template button or use gh cli gh r

Jeason 11 Jul 16, 2022
Clean Typescript React project with working Storybook using Yarn

Getting Started with Create React App This project was bootstrapped with Create React App. Clone this repository To clone this repository, use the fol

Mads Skov Schiellerup 1 Nov 3, 2021
Document your Typescript React components with TSDoc and export into Storybook-friendly JSON 🤖

react-tsdoc react-tsdoc is an WIP tool to extract information from React Typescript component files with TSDoc for documentation generation purposes t

Noah Buscher 13 Oct 15, 2022
An template project made with Next.js, Typescript, Styled Components, Eslint, Prettier, Editorconfig, Storybook, Hygen and Jest + React Testing Library

An template project made with Next.js, Typescript, Styled Components, Eslint, Prettier, Editorconfig, Storybook, Hygen and Jest + React Testing Library

Get In 4 Nov 23, 2022
React Template library with TypeScript, SASS modules, StoryBook and Jest

React Template Library Support Absolute paths, TypeScript, SASS (SCSS) modules, StoryBook and Jest Congrats! You just saved yourself hours of work. Le

Artyom Petrunin 8 Oct 7, 2022