Next.js Minimum Viable Build
Tags: jamstack, webdev, nextjs
Published: 2022-02-23 15:37:56

---
title: Next.js Minimum Viable Build
published: true
date: 2021-08-23 17:00:00 UTC
tags: jamstack,webdev,nextjs
canonical_url: https://katiekodes.com/nextjs-minimum-viable-build/
---

Like with [Gatsby for novices and dabblers](https://dev.to/katiekodes/gatsby-for-novices-and-dabblers-19nn), I need to work my way through Next.js, because I find it intimidating.

## Process

1. Get a [Netlify.com](https://www.netlify.com/) free account
2. Set up a Netlify.com site, connected to a GitHub private [repository](https://github.com/kkgthb/web-site-nextjs-01-min-viable-build), 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.
3. To do: Profit

* * *

## Magic words

Next.js has a “[magic](https://dev.to/katiekodes/how-to-break-and-rebuild-the-jamstack-2g24) folder” path of `/pages/`, or `/src/pages/` _([documentation](https://nextjs.org/docs/advanced-features/src-directory))_. I’ve learned since I started all this that in the [static site generator](https://dev.to/katiekodes/what-is-a-static-site-generator-350o) 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/`](https://nextjs.org/docs/basic-features/pages) – and then there are some more [advanced syntaxes for doing fancier “routing.”](https://nextjs.org/docs/routing/dynamic-routes)

* * *

## 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](https://dev.to/katiekodes/gatsby-minimum-viable-build-3n13):

> _(“[Any React component defined in pages/\*.js or src/pages/\*.js will automatically become a page.](https://nextjs.org/docs/routing/introduction)“)_

```jsx
import React from "react"

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

```

### `/package.json`

```jso
{
  "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:

```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.

* * *

![](https://katiekodes.com/images/booksmany.jpg)

## Posts In This Series
<!-- With thanks to https://realjenius.com/2012/11/03/jekyll-series-list/ -->

- Part 1 - [Next.js for novices and dabblers](https://dev.to/katiekodes/next-js-for-novices-and-dabblers-364e-temp-slug-961341)
- Part 2 - This Article 

* * *

## Helpful links

- [This codebase on GitHub](https://github.com/kkgthb/web-site-nextjs-01-min-viable-build)