Next.js Minimum Viable Build
23 Aug 2021
Table of Contents
Like with Gatsby for novices and dabblers, I need to work my way through Next.js, because I find it intimidating.
Process
- Get a Netlify.com free account
- Set up a Netlify.com 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
https://yoursite.netlify.com/as expected, without “page not found” errors.
- 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.”
Files
/src/pages/index.js
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>
}
/package.json
{
"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"
}
}
Output
The resulting page has the following HTML:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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": []
}
</script>
</body>
</html>
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
- Part 1 - Next.js for novices and dabblers
- Part 2 - This Article
