Handling Previews in a Headless Architecture

There is an ongoing shift in content management from traditional CMS to headless CMS. A headless CMS allows you to completely separate your content management system from the presentation layer. The content is made available via API and can be consumed in any kind of frontend, from websites to mobile apps.

Using headless CMSs has opened up a new way of building websites, known as pre-rendering. It is one of the best-known techniques in Jamstack, in which the website is compiled into a set of static assets like prebuilt HTML, CSS, and JavaScript files with the help of a static site generator (SSG). During the build time, the files are created by collecting the data from a headless CMS. These files are cached to a content delivery network (CDN) and served to a user on each request from the nearest CDN node. This improves speed and response times and reduces hosting costs.

However, content creators need to preview their content before publishing it to production, meaning they need to wait for an entire build to complete before they can view their content. To solve this problem, a preview mode allows editors to view their changes on the fly.

In this tutorial, you’ll learn to implement a preview system when working with a headless CMS like Strapi. You’ll implement the frontend in Next.js for creating content previews.

Setting Up the Environment

Here is what you’ll need to get started:

• Node.js - This tutorial uses Node v14.17.x

• Strapi - This tutorial uses Strapi v3.6.x

• Next.js - This tutorial uses Next.js v11.1.x

Setting Up Project

You’ll need a master directory that holds the code for both the frontend (Next.js) and backend (Strapi). Open your terminal, navigate to a path of your choice, and create a project directory by running the following command:

mkdir strapi-nextjs-previews

In the strapi-nextjs-previews directory, you’ll install both Strapi and Next.js projects.

Setting Up Strapi

In your terminal, execute the following command to create the Strapi project:

npx create-strapi-app backend --template https://github.com/strapi/strapi-template-blog --quickstart

This creates a directory named backend and contains all the code related to your Strapi project. It uses the preconfigured Strapi template for blogs.

Your Strapi project will start on port 1337 and open localhost:1337/admin/auth/register-admin in your browser. Set up your administrative user:

Enter your details and click the Let’s Start button.

You’ll be taken to the Strapi dashboard. Under the Collection Types header on the left sidebar, click the Articles tab for pre-written articles you can access.

All the articles in your Strapi CMS are in the published state. Since the goal is to view the unpublished content, move some of the articles to the draft state.

Click the blog with id 1. You’ll be taken to the edit view screen:

Click the Unpublish button at the top of the screen to change the article into a draft:

Now you have five published articles and one draft article. Next, you’ll learn how to fetch these articles via Strapi API and display them on a Next.js website.

Setting Up Next.js

It’s time to build the frontend website using Next.js.

Since your current terminal window is serving the Strapi project, open another terminal window and execute the following command to create a Next.js project:

npx create-next-app frontend

This creates a directory named frontend containing all the code related to the Next.js project. Navigate into the directory and start the Next.js development server by running the following commands:

cd frontend
npm run dev

This will start the development server on port 3000 and take you to localhost:3000. The first view of the Next.js website will look like this:

Setting Up the UI Framework

Now add Bootstrap for styling your blog. You can actually choose any design framework, but the installation steps may vary.

Shut down the Next.js development server by pressing Control-C in your terminal and execute the following command to install bootstrap, react-bootstrap, and node-sass NPM packages for your Next.js website:

npm install bootstrap react-bootstrap node-sass@5.0.0 --save

Once the installation is complete, open the next.config.js file and add the following code:

1const path = require('path');
2
3module.exports = {
4
5  reactStrictMode: true,
6
7  sassOptions: {
8
9    includePaths: [path.join(__dirname, 'styles')],
10
11  },
12
13};

This tells the node-sass to compile the SCSS to CSS from the styles directory.

In the styles directory:

1. Rename the globals.css to globals.scss

2. Replace the existing styles in globals.scss with the following line of code:

1@import '/node_modules/bootstrap/scss/bootstrap.scss';

In the pages directory, open the _app.js file and replace the existing code with the following:

1import '/styles/globals.scss';
2
3function MyApp({ Component, pageProps }) {
4
5  return <Component {...pageProps} />;
6
7}
8
9export default MyApp;

The above steps will complete the Bootstrap setup in your Next.js website.

You can learn more about customizing the Bootstrap in Next.js here.

Setting Up Markdown to HTML Converter

In the Strapi CMS, the article content is written in Markdown, so you need a way to convert Markdown into HTML. For this, you can use the react-showdown NPM package.

To install react-showdown, execute the following command in your terminal:

npm install react-showdown --save

Designing Articles Page

Now that you have set up the necessary packages for developing your Next.js website, you need to design an articles page. It will fetch your articles from Strapi CMS and display them in the UI.

In the pages directory, create an articles directory by running the following command:

mkdir pages/articles

In the articles directory, create an index.js file and add the following code:

1import { Container, Row, Col } from 'react-bootstrap';
2
3import { fetchArticlesApi } from '/lib/articles';
4
5import Link from 'next/link';
6
7const ArticlesView = (props) => {
8
9  // 2
10
11  const { articles } = props;
12
13  
14
15  // 3
16
17  return (
18
19    <section className="py-5">
20
21      <Container>
22
23        <Row>
24
25          <Col lg="7" className="mx-lg-auto">
26
27            <h1 className="mb-5 border-bottom">Articles</h1>
28
29            {articles.map((article) => {
30
31              return (
32
33                <div key={article.id} className="mb-4">
34
35                  <h2 className="h5">{article.title}</h2>
36
37                  <p className="mb-2">{article.description}</p>
38
39                  <Link href={'/articles/' + article.slug}>
40
41                    <a className="">Read More</a>
42
43                  </Link>
44
45                </div>
46
47              );
48
49            })}
50
51          </Col>
52
53        </Row>
54
55      </Container>
56
57    </section>
58
59  );
60
61};
62
63export async function getStaticProps() {
64
65  // 1
66
67  const articles = await fetchArticlesApi();
68
69  return {
70
71    props: { articles },
72
73  };
74
75}
76
77export default ArticlesView;

In the above code:

1. You use the fetchArticlesApi function in the getStaticProps function provided by Next.js. In the getStaticProps function, you fetch the articles from the Strapi CMS and return them as a prop.

2. The articles array is destructured from the prop variable in the ArticlesView.

3. The articles are displayed in the UI.

The next step is to write code to fetch articles using Strapi API. For that, you need to implement the fetchArticlesApi function.

Create the lib directory under the frontend directory by running the following command:

mkdir lib

In the lib directory, create an articles.js file and add the following code:

1const STRAPI_URL = process.env.STRAPI_URL;
2
3// Helper function to GET the articles from Strapi
4
5async function fetchArticlesApi() {
6
7  const requestUrl = `${STRAPI_URL}/articles`;
8
9  const response = await fetch(requestUrl);
10
11  return await response.json();
12
13}
14
15// Helper function to GET a single article from Strapi
16
17async function fetchArticleApi(slug) {
18
19  const requestUrl = `${STRAPI_URL}/articles/${slug}`;
20
21  const response = await fetch(requestUrl);
22
23  return await response.json();
24
25}
26
27// Helper function to GET a single article from Strapi which is in draft state
28
29async function fetchArticlePreviewApi(slug) {
30
31  const requestUrl = `${STRAPI_URL}/articles?_publicationState=preview&slug=${slug}`;
32
33  const response = await fetch(requestUrl);
34
35  return (await response.json())[0];
36
37}
38
39export { fetchArticlesApi, fetchArticleApi, fetchArticlePreviewApi };

In the above code, you have declared two functions:

1. The fetchArticlesApi function is used to fetch the published articles from the Strapi articles’ endpoint, localhost:1337/articles.

2. The fetchArticleApi function is used to fetch a single article from Strapi based on the slug passed as a parameter. It calls the Strapi single article endpoint, ie localhost:1337/articles/{slug}, and returns the fetched article.

3. The fetchArticlePreviewApi function is used to fetch a single article when the preview mode is enabled. It calls the Strapi articles’ endpoint, ie localhost:1337/articles, and passes a query parameter _publicationState whose value is set to preview. You use preview when you want those articles that are either in published or draft state. Since you need only one article, the slug parameter is used to search for an article by its slug. The response from Strapi API is an array, so you fetch the first item in the response. Each article has a unique slug, so the response array will contain a single item.

Since you have referred to the STRAPI_URL as an environment variable, you need to add it to a .env file. To do so, create a .env file at the root of your Next.js project and add the following secret to it:

1STRAPI_URL=http://localhost:1337

Save your progress and start your Next.js development server by running:

1npm run dev

Visit localhost:3000/articles and you’ll see your articles page rendered by Next.js:

Although you have six articles in Strapi CMS, you’ll only see five since one article is in draft state.

Designing a Single Article Page

The next step is to design a single article page that needs to be dynamic. You can fetch your article using Strapi API based on the slug parameter provided in the URL path.

In the pages/articles directory, create a [slug].js file and add the following code:

1import MarkdownView from 'react-showdown';
2
3import { Container, Row, Col } from 'react-bootstrap';
4
5import { fetchArticlesApi, fetchArticleApi } from '/lib/articles';
6
7const ArticleView = (props) => {
8
9  const { article } = props;
10
11  return (
12
13    <section className="py-5">
14
15      <Container>
16
17        <Row>
18
19          <Col lg="7" className="mx-lg-auto">
20
21            <h1>{article.title}</h1>
22
23            <MarkdownView markdown={article.content} />
24
25          </Col>
26
27        </Row>
28
29      </Container>
30
31    </section>
32
33  );
34
35};
36
37// 1
38
39export async function getStaticPaths() {
40
41  const articles = await fetchArticlesApi();
42
43  const paths = articles.map((article) => ({ params: { slug: article.slug } }));
44
45  return {
46
47    paths: paths,
48
49    fallback: false,
50
51  };
52
53}
54
55export async function getStaticProps(context) {
56
57  // 2
58
59  const slug = context.params.slug;
60
61  if (!slug) {
62
63    throw new Error('Slug not valid');
64
65  }
66
67  
68
69  // 3
70
71  const article = await fetchArticleApi(slug);
72
73  if (!article) {
74
75    return { notFound: true };
76
77  }
78
79  
80
81  // 4
82
83  return { props: { article } };
84
85}
86
87export default ArticleView;

In the above code:

1. You need to return a list of all possible values for the slug as Next.js needs to build a dynamic route. In the getStaticPaths function, you make a call to the fetchArticlesApi function, fetch all the published articles, and map their slugs to the path array.

2. In the getStaticProps function, you get the slug from the URL params. If the slug is not valid, you throw an error saying “Slug not valid.”

3. You fetch an article based on the slug parameter by calling the fetchArticleApi. You redirect the user to the not found page in case the article is not valid.

4. The article is passed as a prop, which is then used in the ArticleView.

Save your progress. Click Read More on any article to open the single article page:

Enabling the Preview Mode

Now that your blog is designed, you need to configure the Next.js Preview API for viewing the drafts on your Next.js website.

In your Next.js project, add the following secret to the .env file:

1CLIENT_PREVIEW_SECRET=<long random string>

The CLIENT_PREVIEW_SECRET variable is used to securely access the preview mode in the browser. It is passed as a query parameter to the preview endpoint when you want to enable the preview mode.

In the pages/api directory, create a preview.js file and add the following code:

1import { fetchArticlePreviewApi } from '/lib/articles';
2
3export default async function handler(req, res) {
4
5  // Get the preview secret and the slug which needs to be previewed
6
7  const secret = req.query.secret;
8
9  const slug = req.query.slug;
10
11  // If the secret passed as URL query parameter doesn't match the preview secret in .env
12
13  // then send a 401-Unauthorized response
14
15  if (secret !== process.env.CLIENT_PREVIEW_SECRET) {
16
17    return res.status(401).json({ message: 'Invalid token' });
18
19  }
20
21  // If slug is not provided, send a 400-Bad Request response
22
23  if (!slug) {
24
25    return res.status(400).json({ message: 'Parameter `slug` is not provided' });
26
27  }
28
29  // Send a request to Strapi and fetch the article
30
31  // to check if the provided slug exists
32
33  const article = await fetchArticlePreviewApi(slug);
34
35  // If the article is not found, send a 404-Not Found response
36
37  if (article === null) {
38
39    return res.status(404).json({ message: 'Article not found' });
40
41  }
42
43  // Enable Preview Mode by setting the cookies
44
45  res.setPreviewData({});
46
47  // Redirect to the path of the article slug
48
49  res.redirect(307, `/articles/${article.slug}`);
50
51}

In the above code:

1. You destructure the secret and slug from the req.query object.

2. You check whether the query parameter secret matches the preview secret (CLIENT_PREVIEW_SECRET).

3. You make sure that the slug is not null. In case it is, you send back a bad request response (res.status(400)).

4. You fetch the article associated with the requested slug by calling the fetchArticlePreviewApi function. You pass the slug parameter and fetch the articles in preview mode.

5. You make sure that the fetched article is not null. In case it is, you send back a not found response (res.status(404)).

6. After verifying the request, you call the res.setPreviewData({}) function, which is provided by the Next.js Preview API. It sets cookies in your browser which are valid for the current session.

7. You redirect (res.redirect()) the user to the requested article page (/articles/${article.slug}) using a 307 redirect.

The cookies set by preview mode API remain in the browser as long as you don’t close the browser window. You might need an API endpoint to turn off the preview mode manually and clear all cookies.

In the pages/api directory, create an exit-preview.js file and add the following code:

1export default function handler(req, res) {
2
3  // Clear the cookies set by the preview mode.
4
5  res.clearPreviewData();
6
7  // Send a 200-Success response to the frontend
8
9  res.status(200).end();
10
11}

In the above code:

1. You call the res.clearPreviewData() function to delete the cookies set by the preview mode API.

2. You send back a success response using res.status(200).end().

Now you need to update the single article page to implement the preview mode functionality.

Open the pages/articles/[slug].js file and update it to match the following code:

1import Router from 'next/router';
2
3import MarkdownView from 'react-showdown';
4
5import { Container, Row, Col } from 'react-bootstrap';
6
7import { fetchArticlesApi, fetchArticleApi, fetchArticlePreviewApi } from '/lib/articles';
8
9const ArticleView = (props) => {
10
11  // 4
12
13  const { article, previewMode } = props
14
15  return (
16
17    <section className="py-5">
18
19      <Container>
20
21        <Row>
22
23          <Col lg="7" className="mx-lg-auto">
24
25            {/* 5 */}
26
27            {previewMode ? (
28
29              <div className="small text-muted border-bottom mb-3">
30
31                <span>You are currently viewing in Preview Mode. </span>
32
33                <a role="button" className="text-primary" onClick={() => exitPreviewMode()}>
34
35                  Turn Off Preview Mode
36
37                </a>
38
39              </div>
40
41            ) : (
42
43              ''
44
45            )}
46
47            <h1>{article.title}</h1>
48
49            <MarkdownView markdown={article.content} />
50
51          </Col>
52
53        </Row>
54
55      </Container>
56
57    </section>
58
59  );
60
61};
62
63// 6
64
65async function exitPreviewMode() {
66
67  const response = await fetch('/api/exit-preview');
68
69  if (response) {
70
71    Router.reload(window.location.pathname);
72
73  }
74
75}
76
77export async function getStaticPaths() {
78
79  const articles = await fetchArticlesApi();
80
81  const paths = articles.map((article) => ({ params: { slug: article.slug } }));
82
83  return {
84
85    paths: paths,
86
87    fallback: false,
88
89  };
90
91}
92
93export async function getStaticProps(context) {
94
95  const slug = context.params.slug;
96
97  if (!slug) {
98
99    throw new Error('Article not found');
100
101  }
102
103	
104
105  // 1
106
107  const previewMode = context.preview ? true : null;
108
109  
110
111  // 2
112
113  let article;
114
115  if (previewMode) {
116
117    article = await fetchArticlePreviewApi(slug);
118
119  } else {
120
121    article = await fetchArticleApi(slug);
122
123  }
124
125  if (!article) {
126
127    return { notFound: true };
128
129  }
130
131	
132
133  return {
134
135    props: {
136
137      article,
138
139      previewMode, // 3
140
141    }
142
143  };
144
145}
146
147export default ArticleView;

In the above code:

1. When you view a page in preview mode, the preview property is set to true and added to the context object, which is passed as a parameter to the getStaticProps function. Based on the value of context.preview, you decide the value of previewMode.

2. If previewMode is true, you fetch the article associated with the requested slug in preview mode by calling the fetchArticlePreviewApi function; otherwise, you fetch the article using the fetchArticleApi function.

3. You return the previewMode as a prop along with the article.

4. previewMode is then destructured in the ArticleView.

5. In the JSX template, if previewMode is set to true, you display a text stating that the preview mode is enabled and a button to close the preview mode. Clicking this button calls the exitPreviewMode function.

6. The exitPreviewMode function is used to turn off the preview mode by calling the exit preview API endpoint, ie /api/exit-preview, then reloads the current article page after receiving a response.

Accessing Preview Mode

Save your progress. Since you have added environment variables to your Next.js project, you need to restart your Next.js development server. Once the server restarts, visit http://localhost:3000/api/preview?secret=<secret>&slug=<slug> by replacing:

• <secret> with the preview secret defined in the .env file

• <slug> with the slug of a draft article

If you have passed the correct secret and slug query parameters, you will be redirected to http://localhost:3000/articles/<slug>:

If you want to know more about the cookies set by the preview mode, open your browser’s Developer Tools and open the Cookies section. You’ll notice the __prerender_bypass and __next_preview_data cookies set in your browser:

At this point, you can test the exit-preview API endpoint as well. Click Turn Off Preview Mode at the top of the page to exit the preview mode. It will delete all the cookies and refresh the page. You’ll be redirected to the 404 - Not Found page:

Adding Preview Button in Strapi

Visiting the preview URL directly is not handy, especially when it involves complex slugs and long preview secrets. The best thing to do is to add a preview button in Strapi Content Manager.

To do so, you need to create a preview button component in React and inject it into Strapi Content Manager.

At the root (backend) of the Strapi project, create a path by running the following command:

1mkdir -p extensions/content-manager/admin/src/InjectedComponents/PreviewLink

In this path, create an index.js file and add the following code:

1import React from 'react';
2
3import styled from 'styled-components';
4
5import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
6
7import EyeIcon from './view.svg';
8
9const StyledPreviewLink = styled.a`
10
11  display: block;
12
13  color: #333740;
14
15  width: 100%;
16
17  text-decoration: none;
18
19  span,
20
21  i,
22
23  svg {
24
25    color: #333740;
26
27    width: 13px;
28
29    height: 12px;
30
31    margin-right: 10px;
32
33    vertical-align: 0;
34
35  }
36
37  span {
38
39    font-size: 13px;
40
41  }
42
43  i {
44
45    display: inline-block;
46
47    background-image: url(${EyeIcon});
48
49    background-size: contain;
50
51  }
52
53  &:hover {
54
55    text-decoration: none;
56
57    span,
58
59    i,
60
61    svg {
62
63      color: #007eff;
64
65    }
66
67  }
68
69`;
70
71const PreviewLink = () => {
72
73  const { modifiedData } = useContentManagerEditViewDataManager();
74
75  if (!modifiedData.slug) {
76
77    return null;
78
79  }
80
81  if (!CLIENT_FRONTEND_URL || !CLIENT_PREVIEW_SECRET) {
82
83    return null;
84
85  }
86
87  return (
88
89    <li>
90
91      <StyledPreviewLink
92
93        href={`${CLIENT_FRONTEND_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}`}
94
95        target="_blank"
96
97        rel="noopener noreferrer"
98
99        title="page preview"
100
101      >
102
103        <i />
104
105        Preview
106
107      </StyledPreviewLink>
108
109    </li>
110
111  );
112
113};
114
115export default PreviewLink;

The above code creates a PreviewLink React component. In the StyledPreviewLink component, you have specified a href attribute that navigates the user to the preview API endpoint on the Next.js website. It makes reference to CLIENT_FRONTEND_URL and CLIENT_PREVIEW_SECRET, so you need to add these variables as environment variables.

To do so, open the .env file at the root of the Strapi project and add the following environment variables:

1CLIENT_PREVIEW_SECRET=<preview-secret>
2
3CLIENT_FRONTEND_URL=http://localhost:3000

Add the same preview secret that you added in your Next.js project.

Since these variables need to be accessed on Strapi’s admin frontend, you need to add a custom webpack configuration.

At the root of your Strapi project, create an admin directory by running the following command:

1mkdir admin

In this directory, create an admin.config.js file and add the following code:

1module.exports = {
2
3  webpack: (config, webpack) => {
4
5    // Add environment variables using the DefinePlugin function
6
7    config.plugins.push(
8
9      new webpack.DefinePlugin({
10
11        CLIENT_FRONTEND_URL: JSON.stringify(process.env.CLIENT_FRONTEND_URL),
12
13        CLIENT_PREVIEW_SECRET: JSON.stringify(
14
15          process.env.CLIENT_PREVIEW_SECRET
16
17        ),
18
19      })
20
21    );
22
23    return config;
24
25  },
26
27};

The above code injects the CLIENT_FRONTEND_URL and CLIENT_PREVIEW_SECRET as global variables so that they can be used anywhere in the Strapi admin frontend.

Then, at extensions/content-manager/admin/src/InjectedComponents/PreviewLink, create a view.svg file and add the following code:

1<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>

This SVG file is used as an icon for the preview button.

Finally, to inject the PreviewLink component in the Strapi Content Manager, create an index.js file at extensions/content-manager/admin/src and add the following code:

1import pluginPkg from "../../package.json";
2
3import pluginId from "./pluginId";
4
5import pluginLogo from "./assets/images/logo.svg";
6
7import App from "./containers/Main";
8
9import PreviewLink from "./InjectedComponents/PreviewLink";
10
11import ConfigureViewButton from "./InjectedComponents/ContentTypeBuilder/ConfigureViewButton";
12
13import lifecycles from "./lifecycles";
14
15import reducers from "./reducers";
16
17import trads from "./translations";
18
19export default (strapi) => {
20
21  const pluginDescription =
22
23    pluginPkg.strapi.description || pluginPkg.description;
24
25  const plugin = {
26
27    blockerComponent: null,
28
29    blockerComponentProps: {},
30
31    description: pluginDescription,
32
33    icon: pluginPkg.strapi.icon,
34
35    id: pluginId,
36
37    initializer: null,
38
39    injectedComponents: [
40
41      // This is the injection zone
42
43      {
44
45        plugin: "content-manager.editView",
46
47        area: "right.links",
48
49        component: PreviewLink,
50
51        key: "content-manager.preview-link",
52
53      },
54
55      {
56
57        plugin: "content-type-builder.listView",
58
59        area: "list.link",
60
61        component: ConfigureViewButton,
62
63        key: "content-manager.link",
64
65      },
66
67    ],
68
69    injectionZones: {
70
71      editView: { informations: [] },
72
73      listView: { actions: [], deleteModalAdditionalInfos: [] },
74
75    },
76
77    isReady: true,
78
79    isRequired: pluginPkg.strapi.required || false,
80
81    layout: null,
82
83    lifecycles,
84
85    mainComponent: App,
86
87    name: pluginPkg.strapi.name,
88
89    pluginLogo,
90
91    preventComponentRendering: false,
92
93    reducers,
94
95    trads,
96
97  };
98
99  return strapi.registerPlugin(plugin);
100
101};

The above code injects the PreviewLink component into the content manager.

All the above additions make changes to the Strapi admin frontend in React. You need to rebuild the admin panel.

To do so, shut down Strapi’s development server and rebuild the admin panel by running the following command:

1npm run build

Once the rebuild is complete, start Strapi’s development server by running the following command:

1npm run develop

Wait for the server to start and then visit localhost:1337/admin. Open any draft article. You’ll see a Preview button at the right-hand side of the content manager:

In case you’re not able to see the Preview button, delete the .cache and build directories by running rm -rf .cache build, then rebuild your Strapi admin frontend by running npm run build.

At this point, you can test whether the preview button works. Update the content of your draft article and click Save.

Click the Preview button. You’ll be directed to the single article page on your Next.js website.

Conclusion

Great work! One of the best selling points of Strapi is that it is open-source. Even if it doesn’t have a certain feature, you can customize Strapi according to your needs. This is exactly what you did today. Your content editors will love the preview mode because they can use it to view their content without building the entire website.

For a similar option, you can implement Previews in a Nuxt.js app using Strapi as a backend.

The entire source code for this tutorial is available in this GitHub repository.