Skip to content

(フロントエンド)ツイート投稿機能(文字&画像)/ ツイート一覧機能#10

Open
umedanaoyuki wants to merge 34 commits into
mainfrom
feature/post
Open

(フロントエンド)ツイート投稿機能(文字&画像)/ ツイート一覧機能#10
umedanaoyuki wants to merge 34 commits into
mainfrom
feature/post

Conversation

@umedanaoyuki

@umedanaoyuki umedanaoyuki commented Jun 2, 2026

Copy link
Copy Markdown
Owner

課題
https://arc.net/l/quote/byyqarqy

画像

投稿(文字&画像) スクリーンショット 2026-07-13 23 21 14 スクリーンショット 2026-07-13 23 20 23
minio スクリーンショット 2026-07-13 23 19 54 スクリーンショット 2026-07-13 23 20 01

@umedanaoyuki umedanaoyuki self-assigned this Jun 2, 2026
@umedanaoyuki umedanaoyuki marked this pull request as draft June 2, 2026 05:14
Comment thread next.config.ts Outdated
/* config options here */
experimental: {
serverActions: {
bodySizeLimit: "6mb",

@umedanaoyuki umedanaoyuki Jul 2, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

【質問】5MB以上の画像ファイルをアップロードした場合、Next.jsアプリがクラッシュしてしまったため、サイズを上げました。

こちらもし本番運用する場合は、server actionsを通さずに、バックエンドのAPIをクライアントコンポーネントから直接叩くような書き方にした方がいいでしょうか?

これまで通りBFFを通した方がいいでしょうか?ここら辺がよくわからず。。。。

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これ難しいですよね(僕自身現場で悩んだところではあります)

バックエンドのAPIをクライアントコンポーネントから直接叩くような書き方にした方がいいでしょうか

上記にするしかないですね。

@umedanaoyuki umedanaoyuki Jul 13, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://kirara-code.net/HappinessChain/questions/331

こちらの考え方で実装をしました(バックエンド側が難しかったです.....)
※課題が終わったらqiitaに四苦八苦したことをまとめようと思います

@@ -0,0 +1,102 @@
import { mockSuggestions } from "@/lib/mock/home-feed";

function HomeRightPanel() {

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

このページは完全に仮でAIに作らせたので一旦無視で問題ありません

Comment thread app/login/action.ts Outdated

if (data.user?.id) {
const cookieStore = await cookies();
cookieStore.set(USER_ID_COOKIE_NAME, String(data.user.id), {

@umedanaoyuki umedanaoyuki Jul 3, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

【質問】ここでcookieを追加でセットしているのですが(AIの提案)
APIを叩く時にユーザーIDが必要になり、そのユーザーIDをCookieで保存するという手法?になっています。

GlobalStateで保存した方がいいのでは?と思っているのですがServerActionsで使用するため、global stateを読み込むことができずこのような設計になっているのですが

これは「いわゆる正しいやり方」でしょうか?個人的にはCookieをあまり増やしたくないと思っていまして(特定のcookieがない場合のエラーハンドリングなどが複雑になりそう)

どのようにするのがベストなのか?わからず質問させていただきました

スクリーンショット 2026-07-04 8 30 47

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next.jsのserver側でapiを叩く場合は、上記のような感じでcookieで保存する方法が良いです!

ただ、保存する値ですがgoでjwtを生成し、それを保存するのが望ましいです!
(すみません、こちらレビュー漏れですね、、、)

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こちらの方針で修正しました

https://kirara-code.net/HappinessChain/questions/332

Comment thread lib/api/tweets.ts
return body as CreateImageTweetResponse;
}

export async function getCurrentUserTweets(options?: {

@umedanaoyuki umedanaoyuki Jul 13, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ログインしているユーザーのツイート一覧を取得する

この処理を記載しています
https://kirara-code.net/HappinessChain/questions/332

Comment thread lib/api/tweets.ts
return data;
}

export async function presignTweetImage(

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"/tweets-image/presign"のAPIを叩く処理

Comment thread lib/api/tweets.ts
return data;
}

export async function completeTweetImage(

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"/tweets-image/complete"のAPIを叩く処理

@umedanaoyuki umedanaoyuki changed the title [WIP](フロントエンド)ツイート投稿機能 [WIP](フロントエンド)ツイート投稿機能(文字&画像) Jul 13, 2026
void (async () => {
try {
await new Promise((resolve) =>
setTimeout(resolve, LOADING_INDICATOR_DELAY_MS),

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここで、あえて「読み込み中」の文字を出すようにしています

Image

@umedanaoyuki umedanaoyuki changed the title [WIP](フロントエンド)ツイート投稿機能(文字&画像) [WIP](フロントエンド)ツイート投稿機能(文字&画像)/ ツイート一覧機能 Jul 13, 2026
@umedanaoyuki umedanaoyuki changed the title [WIP](フロントエンド)ツイート投稿機能(文字&画像)/ ツイート一覧機能 (フロントエンド)ツイート投稿機能(文字&画像)/ ツイート一覧機能 Jul 13, 2026
@umedanaoyuki umedanaoyuki requested a review from yamaryo416 July 13, 2026 16:50
@umedanaoyuki umedanaoyuki marked this pull request as ready for review July 13, 2026 16:51
@umedanaoyuki

Copy link
Copy Markdown
Owner Author

@yamaryo416 レビューお願いします

@yamaryo416 yamaryo416 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants