Netlify Next.js - Solutions-Needed/solutions-needed GitHub Wiki

In life one of the best lessons that we can learn is that you have to keep it simple and it applies to everything. One of the functionalities that we have using Next.js in our project is that we don’t have to worry about routing. Next.js offers a routing structure based on filesystem, so that means that when you create a new page on the project and include it in the folder “pages” you don’t have to worry about anything else, the system automatically defines the route. For example, if we create a file named “login.js” in the folder pages the route will automatically be solutionsneeded.com/login.

Why do I need this? As we explained earlier, that saves us a lot of work. Besides, you can complement this functionality using Netlify. But, what is Netlify? Well, in general terms, it’s a platform where you can deploy your website and you can use it from local development to production deployment. With Netlify you can replace all your hosting infrastructure with a single workflow.

If you decide to use Netlify like us then you can use different features, for example: you can configure your builds and deploys as soon you push something to your Github repository and with that you can guarantee that your site is stable, you can register a new domain for your website, you can manage team members or transfer your site to a different team, you can connect to external microservices...

These kinds of tools in our project can save us a lot of time, storage, money and problems. If we take humans out of the puzzle then we take lots of bugs out of it too.

Now, if you want to add Netlify to some project in Next.js you have to follow some steps:

  1. Update your ‘next.config.js’ to target serverless:
module.exports = {
      // Target must be serverless
      target: 'serverless'
};
  1. Update your scripts in your ‘package.json’ to include next-on-netlify:
"scripts": {
   "dev": "next",
   "build": "next build",
   "postbuild": "next-on-netlify"
   …
 },
  1. Update your ‘netlify.toml’ to tell Netlify how to build everything:
[build]
  command   = "npm run build"
  functions = "out_functions"
  publish   = "out_publish"

References:

https://www.netlify.com/with/nextjs/
https://docs.netlify.com/#discover-netlify
https://www.netlify.com/blog/2020/06/10/2-ways-to-create-server-rendered-routes-using-next.js-and-netlify/