aws s3 이미지 미리보기 업로드 오류

이미지 업로드 미리보기해서 업로드 하는 중인데요. 다음과 같은 오류가 발생합니다.
로그인한 사용자만 글을 쓰게 하기 위해서 session을 사용했는데, 'use client'로 바꿔서 그런 거 같다는 생각이 드는데, 어떻게 해야 할까요?

오류문구
======================
 Failed to compile
./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./pages/api/auth/[...nextauth].js
./app/write/page.js
This error occurred during the build process and can only be dismissed by fixing the error.


작성코드
===========================

'use client'

import { authOptions } from "@/pages/api/auth/[...nextauth]"
import { connectDB } from "@/util/database"
import { getServerSession } from "next-auth"
import { useState } from "react"

export default async function Write() {

    let session = await getServerSession(authOptions)
    console.log(session)

    if (session == null) {
        return <div>로그인하세요</div>
    } else {

        let [src, setSrc] = useState('')
        return (
            <div className="p-20">
                <h4>글작성</h4>
                <form action="/api/post/new" method="POST">
                    <input name="title" placeholder="글제목 입력" />
                    <input name="content" placeholder="글내용 입력" />
                    <button type="submit">전송</button>
                </form>
                <input type="file" accept="image/*" onChange={
                    async (e) => {
                        let file = e.target.files[0]
                        let filename = encodeURIComponent(file.name)
                        let res = await fetch('/api/post/image?file=' + filename)
                        res = await res.json()

                        //S3 업로드
                        const formData = new FormData()
                        Object.entries({ ...res.fields, file }).forEach(([key, value]) => {
                            formData.append(key, value)
                        })
                        let 업로드결과 = await fetch(res.url, {
                            method: 'POST',
                            body: formData,
                        })
                        console.log(업로드결과)

                        if (업로드결과.ok) {
                            setSrc(업로드결과.url + '/' + filename)
                        } else {
                            console.log('실패')
                        }

                    }
                } />
                < img src={src} />
            </div>
        )
    }

}