Deploy Next.js project to Netlify

deploy nextjs project to netlify

What is Netlify

Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for static websites.

Its features include continuous deployment from Git across Netlify Edge, the company's global application delivery network infrastructure, serverless form handling, support for AWS Lambda functions, and full integration with Let's Encrypt. It provides both free and paid plans.

Wikipedia


Netlify is a static page provider with Git deploy integration opportunity (GitHub, GitLab, Bitbucket) . Netlify has got very good performance, it provides https certification and we can use our own domain with the projects. So, we have got everything that we need for a starter project. Here comes a brief guide!


On the other hand Nextjs is a Reactjs framework that provides Server Side Rendering SSR applications which means with Nextjs we can export our full application by pages so it behaves as a server-side rendered application without a server (Nodejs, PHP etc).


You just need to add few scripts in your package.json file:

$

package.json

{
...
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build",
"export": "next export", 😃
"deploy": "npm run build && npm run export" 🚀
}
}

The build script builds our project and saves it in a directory called .next. The export command exports all our files inside the .next directory into plain html, css and javascript files and the deploy script runs both the build and export script one at a time.


The next thing is to deploy your project to git and i'm going to use github for this tutorial.

The project i am using is from an article i wrote earlier

  • Code: https://github.com/dnature/hello-next

First create an account with netlify.com

Next Click on New site from git


Select a new site from git


Next step is to select Github and select your github repository you wish to deploy.

Next step is to select the git branch you wish to deploy. the default is master.

Note: I created a new branch(deploy) for the purpose of this tutorial so i am going to select that branch instead of using the default master branch.

In the build command input field we have to tell netlify to run our deploy script by passing:

$

bash

npm run deploy

Our output directory is the default out folder that nextjs provides when we run npm run export


Deploy nextjs to netlify


That's all! After these settings, Netlify will take care about hosting and build process on your selected branch.


Conclusion

Netlify is a very fantastic service for static sites but now we have learnt how to also deploy server side rendered applications.