Netlify preview drawer not displayed on Next.js application

Support
,
1

Hi there,

I recently deployed a Next.js application to Netlify using the essential plugin for Next. I wanted to try out the Netlify drawer for preview deployments and its integration with Github. I understand since my application is not statically exported you cannot append the script tag required to load the tool. But could I do this myself and if so how?

Here is a link to an example deployment where the drawer is missing: https://deploy-preview-18--dohop.netlify.app/

I have made sure I have enabled it in my deployment settings.

Thanks in advance.

2

Hey there, @sigginjals :wave:

Thanks so much for reaching out! Sorry to hear you are encountering issues. Can you please share either a sample repo to reproduce this or your project repo? This will help us look into this further.

4

Sure, you can just use the next-netlify-starter project.
like this one: GitHub - sigginjals/next-netlify-starter

Just make sure you don’t run next export and only run next build when deploying.

5

Hey @sigginjals,

Next.js (without next export) heavily relies on Netlify Functions to work correctly on Netlify. The current limitation of the preview drawer is that, it doesn’t support pages returned by Functions.

6

I realize that, that is why was asking whether I could add this myself by adding the Iframe inside of my own code.

7

Hi @sigginjals! If you’re feeling adventurous, you could potentially add the snippet yourself for Next.js SSR in Deploy Preview contexts.

During the build, insert this snippet before the closing </body> tag on your HTML pages:

<div data-netlify-deploy-id={DEPLOY_ID} data-netlify-site-id={SITE_ID} data-vcs={VCS} style="position:fixed">
  <script async src="https://netlify-cdp-loader.netlify.app/netlify.js" />
</div>

The values for DEPLOY_ID and SITE_ID are available as environment variables during the build. The value for VCS is one of github, gitlab, or gitlab_self_hosted, depending on the platform you use.

:rotating_light: Very important: Be sure to only write the snippet in Deploy Preview contexts! Otherwise, this feature intended for preview environments could make its way to your production site. You’ll want to add a condition during the build that checks that the CONTEXT environment variable is equal to deploy-preview before writing the snippet.

This should be all you need for your Next.js SSR function. I’d take a look at creating a Netlify build plugin too, that could be another possible avenue for getting collaborative Deploy Previews working with your SSR app. Either way, be sure to come back here and let us know if you’ve got this working, or if you have any additional questions. Take care!

1 Like
8

Thanks for the reply! It was definitely helpful. I tried adding the snippet to my next.js document but for some reason, I cannot access the DEPLOY_ID and because of that the script throws a warning and doesn’t execute, the SITE_ID works fine.

Here is an example of a deployment: https://deploy-preview-29--dohop.netlify.app/

If you check the source you can see that data-netlify-site-id is set just fine but not the deploy-id.

This is how I´m using it inside of _document.tsx

<div
      data-netlify-deploy-id={process.env.DEPLOY_ID}
      data-netlify-site-id={process.env.SITE_ID}
      data-vcs="github"
      style={{ position: 'fixed' }}
    >
      <script async src="https://netlify-cdp-loader.netlify.app/netlify.js" />
    </div>

Any thoughts?

9

@sigginjals Ah, that’s right, DEPLOY_ID isn’t present at that stage. Try adding this snippet to your _document.tsx file:

{process.env.CONTEXT === 'deploy-preview' && 
  <div
    data-netlify-deploy-id={(process.env.DEPLOY_URL || '').match(/([0-9a-f]+)--/i)[1]}
    data-netlify-site-id={process.env.SITE_ID}
    data-vcs="github"
    style={{ position: 'fixed' }}
  >
    <script async src="https://netlify-cdp-loader.netlify.app/netlify.js" />
  </div>
}

On pages that aren’t built by Functions (aka static pages that already get the snippet injected upon request), you’ll see the div container appear twice, but the frame will only be mounted once. You’ll see a warning in your console that says “netlify.js: frame has already mounted.”, but the drawer will work as expected.

10

@jasonb Unfortunately it looks like both CONTEXT and DEPLOY_URL environment variables are undefined :frowning_face:

11

@sigginjals seems to be working here Adding _document.js by jasonbarry · Pull Request #2 · jasonbarry/next-adventure-ssr-test · GitHub (check the diff and the deploy preview) – is that similar to your setup?

12

@jasonb It is almost exactly the same. The only difference is that I had a getInitialProps declaration inside of my custom _app.tsx component. After I removed that, the drawer shows up perfectly fine.

Any idea why getInitialProps would change the environment variables exposed to the client :thinking: ?

13

Unfortunately I don’t think it is really working. WHat’s happened is that when you removed getInitialProps, you enabled automatic static optimization in Next.js, meaning the page was pregenerated and served from the CDN, so CDPs work as usual rather than using the snippet. It still won;t work for dynamic pages. The problem is that they don’t have access to thsoe env vars, as most env vars aren’t available in functions. One option could be to create a plugin that writes the values out into a JSON file in .next, which could then be read by the function at runtime.

1 Like
14

That makes sense. Disappointing but I’m considering this as closed then. I will report back here if I get the time to implement something like that plugin. Cheers for the help though :beers:

1 Like