Next.js + Netlify

How to get started with using Next.js for JAMstack deployed on Netlify.

Next.js Netlify JAMStack Logo (All copyrights owned by their respective owners)

We will develop a React Application using Next.js and then export static HTML, JS files and serve the website using Netlify’s CDN.

Next.js is a Zero Setup, Fully Extensible, Server Rendered React Framework.

JAMstack is modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

Netlify is a CDN offereing that combines global deployment, continuous integration, and automatic HTTPS.

Why Next.js

1. Small API Surface:
   For me this is very important, anyone who is familiar with React can easily pick up Next.js and start writing code. Albeit React is not an easy paradigm to get used to if you are coming from Imperative UI Land. Want to create a new route? Add a new file in the pages folder and you are ready to get started. There is no need to learn GraphQL. (I ought to learn it though, it’s high time now.)
2. Customizable and Adaptable:
   The amount of customization possible with Next.js is amazing. Look at the number of examples of usage with various other libraries.
3. Ability to switch to Node.js Server Serving Requests:
   If at a later date you need to connect to APIs for data or if you need custom routes (which cannot defined at build/deploy time) then you can switch out to a hosted Node.js instance very easily. Actually this was original use case for Next.js. Static HTML Export was introduced in v4.
4. Some more from the Next.js website:
   - Automatic transpilation and bundling (with webpack and babel)
   - Hot code reloading
   - Server rendering and indexing of ./pages

Why JAMstack?

From the JAMstack website:

The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

What this essentially means that we would we generating static HTML and other assets. We won’t have a hosted server serving dynamic requests, so reduced attack surface. And static assets serving websites can be easily scaled using CDNs which in this case will be done by Netlify.

I would implore you to read more on the JAMstack website:

JAMstack | JavaScript, APIs, and Markup

Setup

Follow the setting up commands present in Next’s Getting Started Guide:

npm install --save next react react-dom serve

Add to your package.json:

{
  "scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "serve ./out"
  }
}

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.

Populate ./pages/index.js inside your project:

function Home() {
  return <div>Welcome to next.js!</div>
}

export default Home

• Development: npm run dev will start the dev server
• Build: npm run build will generate static HTML files and JS in the out directory, If you are using something other than Netlify, you will also need to upload the files to Cloud Storage Provider.
• Local Deploy: npm run start will serve those assets like a production server (it will compress your assets as well). (But this is not an actual reproduction of Netlify’s environment. For example: it won’t support changing HTTP Headers using netlify.toml.)

That’s all the basic requirements needed. Now push your code to a remote git repository and connect to Netlify.

Netlify Build Options and Deploy Page

Boilerplate

For my own needs I’ve written a boilerplate. It’s available here:

azizhk/next-typescript-mdx-emotion

It has Typescript, Emotion for Styling (with SSR) and MDX for markdown already setup.

What’s next:

So there are a few advanced topics for which I’ll intend to write upon over the next couple of blogs. One of them is ready:

Next.js + Netlify: File Naming and Caching Strategies

I’m writing these posts as I learn while building my blog. Do follow me to get notified when they are ready. Do recommend (👏 ) this if this article helped you get started with Next.js or helped improve your Next.js setup.