Deploy NextJS to Surge.sh
Dec 23, 2022
Learn how to deploy NextJS to surge.sh
NextJS is a special web framework that is built on top of the React library. It allows you to create React applications quickly due to its various helpful features, such as optimization for images, automatic configuration, incremental static generation, file system-based routing, code splitting and bundling, and much more.
It lets you deploy mainly in two ways:
- Static Export
- Hosting static HTML files using a regular CDN
- Best suited to host a site having pure static content
- Providers - Surge, GitHub Pages, AWS Cloudfront
- Custom Server
- Hosting dynamic HTML files using a custom node runtime server optimized for performance.
- Best suited to host a site having some dynamic content
- Providers - Vercel, Netlify
Using Surge.sh you can deploy the static site faster.
First, create the Next.js app with the
create-next-appcommand using npx:
This creates the
my-appdirectory, initializes the directory as a Git repository, and makes an initial commit:
package.jsonin your editor and add the following export script to the file:
After adding the above script, now the
package.jsonfile scripts section should look like this.
Inside the newly created directory, run the following commands,
You need to login into surge to host the site, once the deployment is successful you might see a message similar to this.
You can now open the URL displayed to visit your app in the browser. In this case, it is
my-next-surge-app.surge.shDepending upon your website size, NextJS build time exporting to HTML might take some time. You can redeploy the changes by following the same step, but make sure to the give same subdomain.
Showcase what you achieved to the world.
You can also modify the domain with a custom one. Here is the official doc that helps you to achieve this. Please note that it is paid Surge.sh feature.