Deploy Next.js 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:
{..."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
First create an account with netlify.com
Next Click on 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:
npm run deploy
Our output directory is the default out folder that nextjs provides when we
run npm run export
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.