인프런 커뮤니티 질문&답변

Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined

at 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980)

at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146)

at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049)

at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464

at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902)

at JSON.parse (<anonymous>)

at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770)

at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155)

✓ Generating static pages (5/5)

> Export encountered errors on following paths:

/newpost/page: /newpost

npm run build시에 발생하는 에러입니다.

각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다..

gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데

잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다.

"use client";

import React, { ChangeEventHandler, useState } from "react";
import LexicalEditor from "@/app/newpost/LexicalEditor";

function Page({ props }: any) {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => {
    setTitle(e.target.value);
  };

  const onSubmit = (e: any) => {
    e.preventDefault();
    console.log("제목 : ", title);
    console.log("내용 : ", content);
  };

  return (
    <form className="postForm" onSubmit={onSubmit}>
      <div className="postForm__titleInputSection">
        <input
          className="postForm__titleInput"
          type="text"
          name="title"
          value={title}
          onChange={onChangeTitle}
          placeholder={"제목을 입력하세요."}
        />
      </div>
      <div className="postForm__editorWrapper">
        <LexicalEditor />
      </div>
      <button>작성하기</button>
    </form>
  );
}

export default Page;

 깃허브 링크 입니다.

https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx