---
title: Visual Preview in Next.js
description: Learn how to connect your Next.js project to Storyblok’s Visual Editor for a seamless, intuitive content editing experience.
url: https://storyblok.com/docs/guides/nextjs/visual-preview
---

# Visual Preview in Next.js

Enhance your editorial and development experience by connecting your local project with Storyblok’s visual editor.

## Set the default environment

Go to **Settings > Visual Editor** and set the default environment to the URL of the local dev server. The Next.js default is `https://localhost:3000/`.

> [!WARNING]
> The preview area requires an `https` secure connection. Learn more in the [Visual Editor concept](/docs/concepts/visual-editor).

Run the server with the `--experimental-https` flag enabled:

```bash
npx next dev --experimental-https
```

To render the home story correctly in the Visual Editor, go to the **Config** section and write `/` into the **Real path** field.

You may have to open the URL in a separate browser tab and accept the certificate first.

## Bridge with the Visual Editor

Connect Next.js components with their Storyblok counterparts by using the `storyblokEditable` function:

This function adds HTML attributes to the components and allows the Storyblok Bridge to connect them with the Visual Editor.

src/components/Feature.jsx

```javascript
import { storyblokEditable } from "@storyblok/react/rsc";

const Feature = ({ blok }) => {
  return (
    <div className="feature">
    <div className="feature" {...storyblokEditable(blok)}>
      <span>{blok.name}</span>
    </div>
  );
};

export default Feature;
```

Now, click on a component and see its corresponding block open up in the editor, or change a field value and see it rendered in real-time.

> [!NOTE]
> Learn more about the available [Bridge options](https://www.storyblok.com/docs/libraries/js/react-sdk) for this package.

## Deploy the preview environment

Make sure to fetch the `draft` version of the content and use a preview access token. Deploy in client-side or server-side rendering mode to reflect content updates dynamically upon saving content.

For the production environment, fetch the `published` version of the content and use a public access token.

> [!NOTE]
> Learn more about preview and production environments in this [tutorial](https://www.storyblok.com/tp/create-preview-production-environments-and-deploy).

## Related resources

[@storyblok/react Package Reference](https://www.storyblok.com/docs/libraries/js/react-sdk)

[Concept: Visual Editor](/docs/concepts/visual-editor)

  

## Pagination

-   [Previous: Integrate Next.js with Storyblok](/docs/guides/nextjs)
-   [Next: Dynamic Routing in Next.js](/docs/guides/nextjs/dynamic-routing)