Next.jsとTiptapで作る日記アプリケーション

公開日|更新日

概要

この記事ではマークダウンで入力できる日記アプリケーションを作成していきます。

  • 「会社の週報にマークダウンを使いたい」
  • 「週報を一覧から管理して、コメントやいいねをつけたい」
  • 「日記形式で個々人のナレッジを蓄積したい（社内に公開・非公開を任意として）」

という個人的な要望から勝手に作り始めました。週報はすでにある程度仕組化されているため、まず日記アプリを作成し、後から拡張していこうと考えて実装を開始しています。細かく見ると実現できていないことも多々ありますが、サービスに必須となる機能は概ね実装したので、備忘録をかねて記載してます。

作成手順

（Notionより転記中）

  1. Next.js 環境構築
  2. PrismaとPostgreSQLの設定
  3. NextAuth ログイン機能の実装
  4. NextAuth ログイン制御の実施・機能拡張
  5. Tiptapでマークダウンエディタ作成
  6. 日記の登録
  7. 画像のアップロード MinIOの設定

技術スタック

名前URL
DOMPurifyhttps://github.com/cure53/DOMPurify
highlight.jshttps://highlightjs.org/
MinIOhttps://min.io/
Next.jshttps://nextjs.org/
Prelinehttps://preline.co/
Prismahttps://www.prisma.io/
query-stringhttps://github.com/sindresorhus/query-string
react-hook-formhttps://www.react-hook-form.com/
shadcn/uihttps://ui.shadcn.com/
Tailwind CSShttps://tailwindcss.com/
Tiptaphttps://tiptap.dev/
Typescripthttps://www.typescriptlang.org/
zodhttps://zod.dev/
zod-form-datahttps://www.npmjs.com/package/zod-form-data
zustandhttps://github.com/pmndrs/zustand