Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 374
camiblanch Avatar asked Apr 23 '20 04:04

camiblanch


People also ask

Does Next js work on Netlify?

With unlimited serverless functions for teams on Enterprise plans, Netlify is the best platform to run large, mission-critical Next. js apps.

What is automatic static optimization in Nextjs?

Next. js automatically determines that a page is static (can be prerendered) if it has no blocking data requirements. This determination is made by the absence of getServerSideProps and getInitialProps in the page. This feature allows Next.

Does Netlify support SSR?

Netlify Functions and Astro are an amazing pair that, as you have seen, enables building dynamic applications that get you to production quickly. With Astro's support for SSR you can now: Handle redirects, 404s, and other dynamic response codes directly in your templates.

Is Nextjs good for static?

Next. js is a server-side rendering (SSR) tool, but with version 9.3, it also supports static site generation. The idea behind it is to create server-rendered React apps that require minimal to no configuration.


1 Answers

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)

like image 182
Ganesh Avatar answered Oct 18 '22 09:10

Ganesh