[nextjs]SNS Server-25(myapp35)ย 

๐Ÿ‘‰๐Ÿป ํšŒ์›๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ๊ณผ ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.
These are features related to sign-up and login.

๐Ÿ‘‰๐Ÿป pinafore์—์„œ ๊ฒ€์ƒ‰๋œ ๊ณ„์ •์˜ ํ”„๋กœํ•„์—์„œ ์ž„์‹œ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฐ์ดํ„ฐ๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.(ํ”„๋กœํ•„ + ์ž‘์„ฑํ•œ๊ธ€)
Replace the temporary data with database data in the profile of the account found on Pinafore (including the profile and posts).

๐Ÿ‘‰๐Ÿป FOLLOW์™€ FOLLOWERS๊ฐ’์€ gotosocial๊ณผ mastodon์—์„œ ์ฃผ์ง€ ์•Š๋Š” ๊ฐ’์œผ๋กœ ๋‚ด ๋กœ์ปฌ ์„œ๋ฒ„(aloy)์—์„œ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.
The “FOLLOW” and “FOLLOWERS” values โ€‹โ€‹are not provided by GoToSocial or Mastodon; I retrieved them from my local server (aloy).

๐Ÿ‘‰๐Ÿป user1์œผ๋กœ ๋กœ๊ทธ์ธํ•˜๋ฉด user1์˜ FOLLOW์™€ FOLLOWERS๊ฐ’์ด pinafore.social์—์„œ ํ™•์ธ ๋ฉ๋‹ˆ๋‹ค.
When you log in as user1, the “Following” and “Followers” counts for user1 are displayed on pinafore.social.

๐Ÿ‘‰๐Ÿป ๊ทธ๋ž˜์„œ pinafore.social์—์„œ ํ™•์ธํ•˜๋Š”๊ฑฐ๋ž‘ ํ•ด๋‹น sns์›น์‚ฌ์ดํŠธ ๊ฐ’๊ณผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Therefore, the values โ€‹โ€‹shown on pinafore.social may differ from those on the actual social media website.

๐Ÿ‘‰๐Ÿป ์ „์ฒด ์ฝ”๋“œ๋Š” ๊นƒํ—ˆ๋ธŒ์—์„œ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
You can find the full code on GitHub.

https://github.com/gideonslife01/flm-nextjs

๐Ÿ“ ์ „์ฒด ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ / Overall Project Structure

myapp project/  
โ”œโ”€โ”€ app/  (Next.js App Router)
โ”‚   โ”œโ”€โ”€ .well-known/webfinger/route.ts  -> webfinger
โ”‚   โ”œโ”€โ”€ api/follow/route.ts    -> Follow API(temporary)
โ”‚   โ”œโ”€โ”€ api/announce/route.ts  -> Boost(Announcement)
โ”‚   โ”œโ”€โ”€ api/like/route.ts.     -> Like API
โ”‚   โ”œโ”€โ”€ api/posts/route.ts     -> Writing API
โ”‚   โ”œโ”€โ”€ api/timeline/route.ts  -> Timeline API
โ”‚   โ”œโ”€โ”€ api/v1/instance/route.ts -> auth
โ”‚   โ”œโ”€โ”€ api/v1/apps/route.ts.    -> auth
โ”‚   โ”œโ”€โ”€ api/v1/accounts/verify_credentials/route.ts -> auth
โ”‚   โ”œโ”€โ”€ api/v1/statuses/route.ts -> Write Post
โ”‚   โ”œโ”€โ”€ api/v1/timelines/home/route.ts -> timeline
โ”‚   โ”œโ”€โ”€ oauth/authorize/route.ts -> auth
โ”‚   โ”œโ”€โ”€ oauth/token/route.ts -> auth
โ”‚   โ”œโ”€โ”€ api/v1/search/home/route.ts -> search
โ”‚   โ”œโ”€โ”€ api/v2/search/home/route.ts -> search
โ”‚   โ”œโ”€โ”€ users/[username]/
โ”‚   โ”‚   โ”œโ”€โ”€ statuses/[id]/route.ts -> Indivisual Post
โ”‚   โ”‚   โ”œโ”€โ”€ route.ts               -> Acotr Information
โ”‚   โ”‚   โ”œโ”€โ”€ followers/route.ts     -> Followers List
โ”‚   โ”‚   โ”œโ”€โ”€ following/route.ts     -> Following List
โ”‚   โ”‚   โ”œโ”€โ”€ inbox/route.ts         -> Inbox
โ”‚   โ”‚   โ””โ”€โ”€ outbox/route.ts        -> outbox
โ”‚   โ”œโ”€โ”€ usersui/[username]/
โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx               -> Timeline UI
โ”‚   โ”‚   โ””โ”€โ”€ _components/themes/
โ”‚   โ”‚       โ”œโ”€โ”€ themeex/ThemeexTheme.tsx   -> Example Theme
โ”‚   โ”‚       โ”œโ”€โ”€ pinafore/PinaforeTheme.tsx -> Theme 1
โ”‚   โ”‚       โ”œโ”€โ”€ mastodon/MastodonTheme.tsx -> Theme 2
โ”‚   โ”‚       โ””โ”€โ”€ minimal/MinimaltTheme.tsx  -> Theme 3
โ”‚   โ”œโ”€โ”€ layout.tsx, page.tsx, globals.css
โ”‚   โ””โ”€โ”€ favicon.ico
โ”œโ”€โ”€ lib/
โ”‚   โ”œโ”€โ”€ theme.tsx              -> Theme Provider
โ”‚   โ”œโ”€โ”€ watchThemes.ts         -> Check real-time theme changes
โ”‚   โ”œโ”€โ”€ auth.ts                -> Authentication, User Management
โ”‚   โ”œโ”€โ”€ ap.ts                  -> Follow,Undo,Create,Likes,Announce
โ”‚   โ””โ”€โ”€ db.ts                  -> DB connection
โ”œโ”€โ”€ data/
โ”‚   โ”œโ”€โ”€ keys/userIDs/          -> private.pem, public.pem(New)
โ”‚   โ””โ”€โ”€ keys/                  -> private.pem, public.pem(legacy)
โ”œโ”€โ”€ data.sqlite                -> Database(1/3)
โ”œโ”€โ”€ data.sqlite-wal            -> Database(2/3)
โ”œโ”€โ”€ data.sqlite-shm            -> Database(3/3)
โ”œโ”€โ”€ Caddyfile                  -> https 
โ”œโ”€โ”€ instrumentation.ts         -> Background Server
โ””โ”€โ”€ package.json

๐Ÿ“ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ / Project Start


๐Ÿ“ ์ฝ”๋“œ ์ˆ˜์ • / Code Modification

โœ”๏ธ app/api/v1/accounts/[id]/route.ts

— ๊ฒ€์ƒ‰ ํ›„ ์ƒ์„ธํŽ˜์ด์ง€ ํ”„๋กœํ•„ ์˜์—ญ
Profile section on the detail page after search

// โœ… myapp35 - app/api/v1/accounts/[id]/route.ts 
// - Profile info.

import { NextResponse } from 'next/server';
import db from '@/lib/db';

const DOMAIN = process.env.DOMAIN || 'aloy-horizon.duckdns.org';

export async function GET(req: Request, { params }: { params: Promise<{ id: string }> }) { ... ...}

export async function OPTIONS() {
  return new NextResponse(null, { status: 204, headers: { 'Access-Control-Allow-Origin': '*' } });
}

โœ”๏ธ app/api/v1/accounts/[id]/statuses/route.ts

— ๊ฒ€์ƒ‰ ํ›„ ์ƒ์„ธํŽ˜์ด์ง€ ๊ธ€ ์˜์—ญ
Content area of โ€‹โ€‹the details page after search

// โœ… myapp35 - app/api/v1/accounts/[id]/statuses/route.ts
// - pinafore s

import { NextResponse } from 'next/server';
import db from '@/lib/db';

const DOMAIN = process.env.DOMAIN || 'aloy-horizon.duckdns.org';

export async function GET(req: Request, { params }: { params: Promise<{ id: string }> }) { ... ... }

export async function OPTIONS() {
  return new NextResponse(null, { status: 204, headers: { 'Access-Control-Allow-Origin': '*' } });
}

๐Ÿ“ ํ…Œ์ŠคํŠธ / Test

โœ”๏ธ ๋ฆฌ๋ชจํŠธ ์„œ๋ฒ„ / Remote Server

— ๋งˆ์Šคํ† ๋ˆ / Mastodon

Mastodon

— ๊ณ ํˆฌ์†Œ์…œ / Gotosocial

Gotosocial

โœ”๏ธ ๋กœ์ปฌ์„œ๋ฒ„ / Local Server

Local Server

์š”ํ•œ๋ณต์Œ 8์žฅ 32์ ˆ / John 8:32

“๊ทธ๋ฆฌ๊ณ  ๋„ˆํฌ๋Š” ์ง„๋ฆฌ๋ฅผ ์•Œ๊ฒŒ ๋  ๊ฒƒ์ด๋ฉฐ, ์ง„๋ฆฌ๊ฐ€ ๋„ˆํฌ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ํ•  ๊ฒƒ์ด๋‹ค.”

“Then you will know the truth ,and the truth will set you free”

Leave a Reply