Next.js 勉強会 のお題アプリの参考実装です。

使い方

1. まず、お題のアプリを自分で作ってみる
2. この参考実装を起動してみて、作ったものと比較してみる
3. 参考実装か、自分で作ったものに対して改善を加えてみる

動作環境

• node v14.10.0 で作ったが、その辺のバージョンなら大体動くと思われる
• npm scripts で起動する

  # devサーバの起動
  npm run dev
  

@daikw の頭の中

1. すぐ使えそうなテンプレがないか調べる -> create-next-app と with-typescript が見つかる
2. 使えそうなところを利用して実装する: User -> File に変換し、いらないものを削る
3. それっぽい ダウンロード / アップロード のサンプルを真似して実装する
4. ファイルストレージ (_uploaded_files) とのグルーコードを書く

参考にしたサンプル

• NextJS: Simple Upload file to server - CodeSandbox
• node.js - How to download a file on Next.js using an API route - Stack Overflow

What's next?

Light

• フッター・ヘッダーを凝ったものにする
• ファイルのアップロード成功・失敗を画面に表示する
• アップロード先ディレクトリを、汎用の一時ディレクトリにする
• fs を fs/promises に置換する
• 特定のファイルをアップロードすることで、アプリケーションに DOS 攻撃をする / このパスの攻撃を緩和する

Medium

• ファイルストレージへのアクセスに排他制御を入れる
• material-ui を入れて見た目を綺麗にする
• File を一度にたくさん受け取れるようにする

Challenging

• ファイルストレージをインメモリストア(Redis)やデータベース(SQLite)に換装する
• ファイルのプレビュー機能をつける
• ファイルアップロード時にウイルスチェックを入れる
• 特殊なファイルを作って、Next.js の実行サーバに侵入する