How to Deploy a next.js Web App in 2020
NextJS is a framework built for creating web applications based on React. It is famous for its server-side rendering capabilities but is not limited to it. The framework contains many features that make it one of the most desirable frameworks for React. Offering features like zero-config, SSG and SSR, Incremental static generation, TypeScript support, Fast refresh, File-system routing, API-routes, Built-in CSS support, Code-splitting and bundling, and much more.
In this article, we will see how you can build your own NextJS app from scratch and test it locally, and then deploy it to the cloud.
Getting Started With NextJS
We will be using a template repository for testing/deploying our NextJS web app. You can check out the template repository from here:
https://github.com/kintohub-examples/nextjs-web-app/generate
This will import the NextJS template into a working repository under your own GitHub account or organization.
Pre-requisites
Before moving forward with deploying your NextJS web app, you need to fulfill some basic software requirements.
Testing the app Locally
Once you have imported the NextJS template under your GitHub account, we need to test it locally and get it working. So how to do that?
- The first step is to clone the NextJS repository you just imported, onto your local machine.
git clone [your-repository-name]- Now we need to install the dependencies.
cd [your-project]npm install
This will launch a local development server at http://localohost:3000
Deploy NextJS Web App To The Cloud
After you test the NextJS web app locally, it’s time to deploy it onto the cloud. KintoHub makes it super easy to deploy any web app onto the cloud.
1. Visit https://app.kintohub.com and sign-up for a new account (its free) or if you already have an account, log-in to it.
2. If you have just signed-up for KintoHub you need to create a new Environment first. Choose any among the available regions.
3. Once your environment is created, we need to create a new service for our NextJS web app. Click on the Create Service button, and you should see these options.
KintoHub offers multiple service types, each having its own features and uses but for our NextJS web app, we will use the Web App option.
4. Once you select the Web-App option, you will need to use the NextJS repository that we created in the first most step. You can directly connect your GitHub account and select your NextJS repository. If you prefer not to connect your account, you can use the Import URL tab.
5. Configure the build and installation steps -
- Service name — Anything you want
- Language — NodeJS
- Language Version — 12+
- Build Command — npm install && npm run build
- Start Command — npm start
- Port — 3000
6. After the configuration is done, press the Deploy button and let the magic happen.
7. Once the deployment is successful, you can get the access URL from the Access tab. Copy and paste the URL in your browser to see the live web-app.
Updating your NextJS Web App
Now that we have created and deployed the NextJS app to the cloud, how do we modify/update the web-app? Well, that’s a common thing to do. The next step shows how you can modify your NextJS web-app and deploy the latest version to KintoHub.
- Make the changes that you need in your NextJS web-app and push them to your github repository.
- Once you have committed the changes, you’re good to deploy them to KintoHub.
- Redeploying your changes to KintoHub is as easy as just clicking a button. No, literally, just click the Trigger Deploy button and KintoHub will fetch the latest commit from your repository and deploy it. Once the deployment finishes, you can see the new changes on the same URL as earlier.
What’s Next?
You created and deployed your NextJS web app on KintoHub and have successfully updated it. But what else can you do on KintoHub?
For starters, you can support your NextJS web app with a backend API
https://docs.kintohub.com/service-types/backend-api
Or, maybe you want a custom domain for your web app
https://docs.kintohub.com/anatomy/domains
How about creating a Cron Job to run a piece of code periodically or on a scheduled basis?
https://docs.kintohub.com/service-types/job
Do you want Environment variables for your apps?
https://docs.kintohub.com/anatomy/environment-variables
Or maybe you’re tired of setting up your Database manually? How about someone does that for you with just a click of a button?
https://docs.kintohub.com/catalogs/postgresql
Conclusion
Kudos! You just learned how to successfully deploy and update your NextJS web app to the cloud using KintoHub. But wait, we’ve got more for you.
You want to deploy a full stack app? Or maybe a standalone Database? Or a statistics website?
We’ve got you covered. KintoHub supports many other frameworks and application types. To know more about them, checkout https://kintohub.com.
Join our discord server or contact us here.
We are looking forward to your feedback!
