3 min read - Published on Fri Dec 23 2022
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
Custom Server
Using Surge.sh you can deploy the static site faster.
First, create the Next.js app with the create-next-app
command using npx:
npx create-next-app my-app
This creates the my-app
directory, initializes the directory as a Git repository, and makes an initial commit:
Creating a new Next.js app in /Users/bharath/personal/projects/my-app.Using npm.Installing dependencies:- react- react-dom- next- @next/font- typescript- @types/react- @types/node- @types/react-dom....Initializing project with the template: defaultInitialized a git repository.Success! Created my-app at /Users/bharath/personal/projects/my-app
Open package.json
in your editor and add the following export script to the file:
"export": "npm run build && next export"
After adding the above script, now the package.json
file scripts section should look like this.
"scripts": {"dev": "next dev","build": "next build","start": "next start","export": "npm run build && next export"},
Inside the newly created directory, run the following commands,
// Export the built project into static HTMLnpm run export// Deploy the artifact to surgenpx surge out
You need to login into surge to host the site, once the deployment is successful you might see a message similar to this.
Running as random-user@random-email.com (Student)project: outdomain: my-next-surge-app.surge.shupload: [====================] 100% eta: 0.0s (24 files, 562445 bytes)CDN: [====================] 100%encryption: *.surge.sh, surge.sh (141 days)IP: 138.197.235.123Success! - Published to my-next-surge-app.surge.sh
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.
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!