Content Studio preview

In this chapter, we’ll enable editors to preview the Next rendering directly from Content Studio.

Task: Enable preview

To get preview working, we need to make a few changes to the Enonic application:

Follow the steps below to get it working:

Add a proxy controller, that can fetch rendered HTML and assets from the Next server

Rather than implementing this ourselves, we’ll simply add the Nextjs proxy library to the Enonic application we created earlier.

The proxy is optimized for Next, as it performs some special handling and processing related to assets and the /_next path.

Add the include line below to your project’s build.gradle file

dependencies {
    ...
    include 'com.enonic.lib:lib-nextjs-proxy:<version>'
    ...
}

<version> must be replaced by the current version. Visit the library on Enonic Market. Click Get started and choose the latest version.

Add a controller mapping

In this step, we will activate Content Studio’s preview to use the proxy

Update the site.xml , mappings section to look like this:
src/main/resources/site/site.xml
```
...
  <mappings>
    <mapping controller="/controllers/graphql.js" order="50">
      <pattern>/_graphql</pattern>
    </mapping>
    <mapping controller="/lib/nextjs-proxy/proxy.js" order="99">
      <pattern>/.*</pattern>
    </mapping>
  </mappings>
...
```
This effectively replaces the preview that shipped with the app, with the proxy. All requests excluding /_graphql (which contains the headless API) will now be be handled by the proxy instead - as you can see from the /.* pattern, which essentially means "catch all" URL patterns.

If the headless API mappings come in conflicts with your Next.js app, you can always change the mapping above.

Redeploy the Enonic app after saving the changes:
```
enonic project deploy
```
Verify the preview

By default, the proxy is configured to access the Next.js server on localhost:3000, later we will look into how this can be changed - but essentially this means everything should be working instantly.

From Content Studio, select (or edit) any item in the content hierarchy, and it should be rendered by Next.js and visible in the preview panel on the right:

That completes the preview setup, moving forward, we’ll make it possible to build pages editorially.