I'm trying out Next.js with a pluralsight course and running into a weird issue where my index page will randomly stop working, then only ever return JSON without any error logging or indication that something is wrong. It doesn't always start out doing this, but once it does there's no recovering outside of wiping out what's in the existing file. Is there maybe a specific syntax for form elements Next needs?

index.js and index.tsx output:

{
  "props": {
    "pageProps": {}
  },
  "page": "/",
  "query": {},
  "buildId": "development",
  "nextExport": true,
  "autoExport": true,
  "isFallback": false,
  "scriptLoader": []
}

The index page as tsx (also happened on a js version which lead me to use npx create-next-app@latest --ts hoping it would work better and I prefer to use TS anyway)

import { useState } from 'react';
import type { NextPage } from 'next';

const About: NextPage = () => {
    const [inputText, setInputText] = useState<string>("");

    return (
        <div>
            <input onChange={(e) => { setInputText(e.target.value) }} placeholder="Enter Text Here" />
            <p>{inputText}</p>
        </div>
    );
}

export default About;

If there's anything obvious breaking Next please point it out, I'm not sure what's going on here and am surprised how easy it is to bork a page with such simple html/jsx. Any tips or suggestions appreciated!

-- edit --

So, if I add a label (or most other HTML tags) for the input element the page displays as expected again. Is there a Next.js forms requirement blocking one from using an input without a label or some other HTML tag before it? Any documentation on that would be great as I haven't found it yet.