Memo

ファイルアクセス
■サーバコンポーネントからファイルアクセス

src/app/memo/page.tsx
'use server'

import { saveMemo } from './memo-action'

export default async function Memo() {
  return (
    <main>
      <h1 className="title">Memo</h1>
      <p className="message">メモを入力してください。</p>
      <form className="m-5" action={saveMemo}>
        <div><textarea className="input" name="memo" cols="30" rows="3"></textarea></div>
        <button className="button">保存</button>
      </form>
    </main>
  )
}


src/app/memo/memo-action.tsx
'use server'

import { redirect } from 'next/navigation'
import fs from 'fs'

const filename = './src/app/memo/data.txt'

export async function saveMemo(form) {
  const memo = form.get('memo')
  fs.writeFileSync(filename, memo)
  redirect('/memo-complete')
}

export async function readMemo() {
  return fs.readFileSync(filename, 'utf8')
}


src/app/memo-complete/page.tsx
'use server'

import Link from 'next/Link'
import { readMemo } from '../memo/memo-action'

export default async function MemoComplete() {
  const memo = await readMemo()

  return (
    <main>
      <h1 className="title">Memo</h1>
      <p className="message">メッセージを保存しました。</p>
      <pre className="message">{memo}</pre>
      <div className="m-5">
        <Link href="/memo" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}


src/app/memo/data.txt
（カラのファイル）
■クライアントコンポーネントからファイルアクセス

src/app/memo-show/page.tsx
'use client'

import { readMemo } from '../memo/memo-action'
import { useState, useEffect } from 'react'

export default function MemoShow() {
  const [memo, setMemo] = useState('No data.')
  useEffect(() => {
    readMemo().then(res => {
      setMemo(res)
    })
  }, [])

  return (
    <main>
      <h1 className="title">Memo</h1>
      <p className="message">メッセージは以下のとおりです。</p>
      <pre className="message">{memo}</pre>
    </main>
  )
}
Memo

Advertisement
