Deploy NextJS to Surge.sh
date
Dec 23, 2022
slug
nextjs-surge
status
Published
tags
nextjs
hosting
summary
Learn how to deploy NextJS to surge.sh
type
Post
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.
Creating a Basic NextJS Application
First, create the Next.js app with the
create-next-app command using npx:This creates the
my-app directory, initializes the directory as a Git repository, and makes an initial commit:Open
package.json in your editor and add the following export script to the file:After adding the above script, now the
package.json file scripts section should look like this.Deployment
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.sh Depending 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.
What’s Next?
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.
Happy Hosting!