Next.jsでMisskeyクライアントを作っている話

Next.jsでMisskeyのクライアントを作っている話 自己紹介 名前：山田ハヤオ 所属：群馬大学 情報学部 趣味：Linux, 原神 Twitter：@Hayao0819 GitHub：@Hayao0819 二郎系ラーメンを食べるのが好きです。 山田ハヤオ (@Hayao0819) 1/11

Next.jsでMisskeyのクライアントを作っている話 今回の話題 (友人が)MisskeyのクライアントをNext.jsで作っている 私はプルリクエストを送りつけているだけ リポジトリ↓ https://github.com/yamader/minskey ここからすぐに使えます https://minskey.dyama.net/ 山田ハヤオ (@Hayao0819) 2/11

• https://github.com/yamader/minskey
• https://minskey.dyama.net/

Next.jsでMisskeyのクライアントを作っている話 Misskeyとは? ActivityPub上の分散型SNSの一種 与謝野晶子やレターパックのネタが有名 →既存のクライアントは機能が豊富すぎてわかりにくい気がする… 山田ハヤオ (@Hayao0819) 3/11

Next.jsでMisskeyのクライアントを作っている話 技術スタック Next.js 14 AppRouter with Static Export TailwindCSS + Radix UI Primitive Jotai 山田ハヤオ (@Hayao0819) 4/11

Next.jsでMisskeyのクライアントを作っている話 公式クライアントと比較して何がいい？ インスタンスをまたいだアカウント切り替え 軽快(当社比)な動作 最小限の機能により古いブラウザでの動作をサポート(するかも) (次のUI変更によって)T**tterに近いレイアウト 山田ハヤオ (@Hayao0819) 5/11

Next.jsでMisskeyのクライアントを作っている話 山田ハヤオ (@Hayao0819) 6/11

Next.jsでMisskeyのクライアントを作っている話 Static Export Next.jsで書いたページを静的に出力できる機能 Github Pages等にもデプロイできるので、技術的なしがらみが少ない その分Next.jsの便利機能(画像配信の最適化や動的ルーティング)に制限が かかってしまい、恩恵を受けにくい 山田ハヤオ (@Hayao0819) 7/11

Next.jsでMisskeyのクライアントを作っている話 独自APIクライアント Misskeyはセルフホストする分散型SNS→様々なバージョンが混合してい る Misskey公式のAPIは最新のバージョンしかサポートしていない →独自に必要なAPIを複数バージョンで対応できるように実装 今後別パッケージとして切り出す…かも 山田ハヤオ (@Hayao0819) 8/11

Next.jsでMisskeyのクライアントを作っている話 React 18をフル活用 Suspense React Client Componentでasyncを使えるようにする 読込中に別コンポーネントの表示…ということが簡単に行える use Hook Suspenseとともに使う、PromiseやContextを読みとる if文の中でも使える 山田ハヤオ (@Hayao0819) 9/11

Next.jsでMisskeyのクライアントを作っている話 MFMをReactで使う MFM - Misskey用に大幅に拡張されたマークダウン アニメーションをはじめとする複雑な構文に対応している https://github.com/yamader/react-mfm ReactでMFM文字列をパースしてReactNodeを返す 山田ハヤオ (@Hayao0819) 10/11

• https://github.com/yamader/react-mfm

Next.jsでMisskeyのクライアントを作っている話 終わり 作っているのは友人の山D(Twitter: @_yamader)です まだまだ最小限の機能しかないので開発者を募集しています 山田ハヤオ (@Hayao0819) 11/11