Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Next.js Minimum Viable Build

23 Aug 2021 🔖 architecture jamstack web development minimum viable build
💬 EN

Table of Contents

Like with Gatsby for novices and dabblers, I need to work my way through Next.js, because I find it intimidating.


  1. Get a free account
  2. Set up a site, connected to a GitHub private repository, that contains just 2 files:
    • /src/pages/index.js
    • /package.json
    • TEST IT: Make sure you can visit as expected, without “page not found” errors.
  3. To do: Profit

Magic words

Next.js has a “magic folder” path of /pages/, or /src/pages/ (documentation). I’ve learned since I started all this that in the static site generator world, “routing” tends to refer to the ways you can configure the SSG to turn data you’re feeding it into actual URLs. Most of them have some way of automatically doing “routing” based on the way you named data folders or files, or the way you named template folders or files. Some of them will pretty much eat every folder they can get their hands on and try to route it (11ty); others like Next.js seem to favor limiting this behavior, by default, to folders with “magic names” like /pages/ – and then there are some more advanced syntaxes for doing fancier “routing.”



Since Gatsby and Next.js both use React / JSX as a templating language, I simply reused my /src/pages/index.js file from Gatsby minimum viable build:

(“Any React component defined in pages/*.js or src/pages/*.js will automatically become a page.“)

import React from "react"

export default function Home() {
  return <div>Hello world!</div>


  "name" : "netlify-nextjs-test-01",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "develop": "next dev",
    "start": "next start",
    "build": "next build"
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"


The resulting page has the following HTML:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" />
    <noscript data-n-css=""></noscript>
    <script defer="" nomodule="" src="/_next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js"></script>
    <script src="/_next/static/chunks/webpack-61f1b6d34e7ba415b8c1.js" defer=""></script>
    <script src="/_next/static/chunks/framework-9e6ae5c73d4e43bf334d.js" defer=""></script>
    <script src="/_next/static/chunks/main-b9780dc6f4fa7abb3771.js" defer=""></script>
    <script src="/_next/static/chunks/pages/_app-76f68770679821db743d.js" defer=""></script>
    <script src="/_next/static/chunks/pages/index-518723d5d0e877e1fb3f.js" defer=""></script>
    <script src="/_next/static/7d3ar6btJVD3RfAMzzNO0/_buildManifest.js" defer=""></script>
    <script src="/_next/static/7d3ar6btJVD3RfAMzzNO0/_ssgManifest.js" defer=""></script>
    <div id="__next"><div>Hello world!</div></div>
    <script id="__NEXT_DATA__" type="application/json">
        "props": { "pageProps": {} },
        "page": "/",
        "query": {},
        "buildId": "7d3ar6btJVD3RfAMzzNO0",
        "runtimeConfig": {},
        "nextExport": true,
        "autoExport": true,
        "isFallback": false,
        "scriptLoader": []

Like with Gatsby output, there’s a lot of JavaScript embedded in my page, but the <div>Hello world!</div> I expect to see exists deep in the middle.

Posts In This Series

--- ---