Estoy probando Next.js con un curso de pluralsight y me encuentro con un problema extraño en el que mi página de índice deja de funcionar aleatoriamente, luego solo devuelve JSON sin ningún registro de error o indicación de que algo anda mal. No siempre comienza haciendo esto, pero una vez que lo hace, no hay recuperación fuera de borrar lo que hay en el archivo existente. ¿Existe tal vez una sintaxis específica para los elementos de formulario que necesita Next?

salida index.js e index.tsx:

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

La página de índice como tsx (también sucedió en una versión js que me llevó a usar npx create-next-app@latest --ts esperando que funcione mejor y prefiero usar TS de todos modos)

 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;

Si hay algo obvio que se está rompiendo. A continuación, indíquelo, no estoy seguro de lo que está pasando aquí y me sorprende lo fácil que es crear una página con un html/jsx tan simple. ¡Cualquier consejo o sugerencia apreciada!

-- editar --

Entonces, si agrego una etiqueta (o la mayoría de las otras etiquetas HTML) para el elemento de entrada, la página se muestra nuevamente como se esperaba. ¿Existe un requisito de formularios Next.js que impida que uno use una entrada sin una etiqueta o alguna otra etiqueta HTML antes? Cualquier documentación sobre eso sería genial ya que aún no la he encontrado.