Search code examples
next.jsnetlifystatic-site

How to use Next.js Automatic Static Site Optimization and still export for Netlify?


I have been working on implementing some of the updates from Next 9.3. I have been moving from getInitialProps to getServerSideProps and noticed that my exportPathMap became unhappy with these pages becoming dynamic. Everything works fine running next, but when I go to run next build && next export, I run into some issues.

In the docs for static html export it states If your pages don't have getInitialProps you may not need next export at all; next build is already enough thanks to Automatic Static Optimization. I am able to get that to work happily with my new getServerSideProps calls when I run next build && next start. What steps do I need to take in order for that to also work with next export so I can deploy via Netlify. Here's an example of the error I am getting when I attempt to run next export

Error occurred prerendering page "/videos/[videos_title]". Read more: https://err.sh/next.js/prerender-error:
Error: Error for page /videos/[videos_title]: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export

Solution

  • Applications build with SSR cannot be deployed in Netlify or any other static hosting sites (Except Vercel, which supports NextJS SSR Deployment)

    When you go for SSR (using getServerSideProps), it's meaningless to use the command next export since it will try to create static content which is totally opposite to the SSR.

       

    • One way of deployment is to run it in the Virtual Server (like EC2) by creating custom server.js file with proper routing configuration.
    • Another easy & quick method is to use Vercel (Zeit formerly) for deployment of SSR implemented Applications where they handle it wisely

    Vercel has poor documentation for deployment of SSR Applications. Luckily I've got the below information from the Support Team and requested them to update the documentation to elaborate more about the SSR Deployment in Vercel.

    When deploying in Vercel,

    • Give Build Command as next build or npm run build
    • Leave the Output Directory as Empty

    NOTE: Application with custom server.js will not work properly in Vercel, in that case, go for Virtual Server (Like EC2)