(フロントエンド)ツイート投稿機能(文字&画像)/ ツイート一覧機能#10
Conversation
# Conflicts: # app/home/page.tsx
ログインユーザー名の動的表示を取り除き、サイドバーのレイアウトを従来の構成に戻す。 Co-authored-by: Cursor <cursoragent@cursor.com>
| /* config options here */ | ||
| experimental: { | ||
| serverActions: { | ||
| bodySizeLimit: "6mb", |
There was a problem hiding this comment.
【質問】5MB以上の画像ファイルをアップロードした場合、Next.jsアプリがクラッシュしてしまったため、サイズを上げました。
こちらもし本番運用する場合は、server actionsを通さずに、バックエンドのAPIをクライアントコンポーネントから直接叩くような書き方にした方がいいでしょうか?
これまで通りBFFを通した方がいいでしょうか?ここら辺がよくわからず。。。。
There was a problem hiding this comment.
これ難しいですよね(僕自身現場で悩んだところではあります)
バックエンドのAPIをクライアントコンポーネントから直接叩くような書き方にした方がいいでしょうか
上記にするしかないですね。
There was a problem hiding this comment.
https://kirara-code.net/HappinessChain/questions/331
こちらの考え方で実装をしました(バックエンド側が難しかったです.....)
※課題が終わったらqiitaに四苦八苦したことをまとめようと思います
| @@ -0,0 +1,102 @@ | |||
| import { mockSuggestions } from "@/lib/mock/home-feed"; | |||
|
|
|||
| function HomeRightPanel() { | |||
There was a problem hiding this comment.
このページは完全に仮でAIに作らせたので一旦無視で問題ありません
|
|
||
| if (data.user?.id) { | ||
| const cookieStore = await cookies(); | ||
| cookieStore.set(USER_ID_COOKIE_NAME, String(data.user.id), { |
There was a problem hiding this comment.
【質問】ここでcookieを追加でセットしているのですが(AIの提案)
APIを叩く時にユーザーIDが必要になり、そのユーザーIDをCookieで保存するという手法?になっています。
GlobalStateで保存した方がいいのでは?と思っているのですがServerActionsで使用するため、global stateを読み込むことができずこのような設計になっているのですが
これは「いわゆる正しいやり方」でしょうか?個人的にはCookieをあまり増やしたくないと思っていまして(特定のcookieがない場合のエラーハンドリングなどが複雑になりそう)
どのようにするのがベストなのか?わからず質問させていただきました
There was a problem hiding this comment.
Next.jsのserver側でapiを叩く場合は、上記のような感じでcookieで保存する方法が良いです!
ただ、保存する値ですがgoでjwtを生成し、それを保存するのが望ましいです!
(すみません、こちらレビュー漏れですね、、、)
There was a problem hiding this comment.
こちらの方針で修正しました
| return body as CreateImageTweetResponse; | ||
| } | ||
|
|
||
| export async function getCurrentUserTweets(options?: { |
There was a problem hiding this comment.
ログインしているユーザーのツイート一覧を取得する
この処理を記載しています
https://kirara-code.net/HappinessChain/questions/332
| return data; | ||
| } | ||
|
|
||
| export async function presignTweetImage( |
There was a problem hiding this comment.
"/tweets-image/presign"のAPIを叩く処理
| return data; | ||
| } | ||
|
|
||
| export async function completeTweetImage( |
There was a problem hiding this comment.
"/tweets-image/complete"のAPIを叩く処理
| void (async () => { | ||
| try { | ||
| await new Promise((resolve) => | ||
| setTimeout(resolve, LOADING_INDICATOR_DELAY_MS), |
|
@yamaryo416 レビューお願いします |

課題
https://arc.net/l/quote/byyqarqy
画像
投稿(文字&画像)
minio