{"id":10373,"date":"2026-09-18T07:49:05","date_gmt":"2026-09-17T22:49:05","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=10373"},"modified":"2026-09-18T12:43:57","modified_gmt":"2026-09-18T03:43:57","slug":"nextj-ssns-server-32","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/09\/18\/nextj-ssns-server-32\/","title":{"rendered":"[nextjs]SNS Server-32(myapp42)\u00a0"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb myapp42\uc5d0\uc11c\ub294 \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294 \uacc4\uc815\uc73c\ub85c sns\ud398\uc774\uc9c0 \uc811\uadfc\uc2dc 404\ud398\uc774\uc9c0\ub85c \uc548\ub0b4\ud569\ub2c8\ub2e4.<br>In myapp42, users are directed to a 404 page when attempting to access an SNS page for a non-existent account.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ud314\ub85c\uc6cc \ubaa9\ub85d,\ud314\ub85c\uc789 \ubaa9\ub85d\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.<br>Implement the follower and following lists.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc804\uccb4 \ucf54\ub4dc\ub294 \uae43\ud5c8\ube0c\uc5d0\uc11c \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>You can find the full code on GitHub.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/gideonslife01\/flm-nextjs\">https:\/\/github.com\/gideonslife01\/flm-nextjs<\/a><\/p>\n\n\n\n<p>\ud83d\udcc1 \uc804\uccb4 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \/ Overall Project Structure<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>myapp project\/  \n\u251c\u2500\u2500 app\/  (Next.js App Router)\n\u2502   \u251c\u2500\u2500 .well-known\/webfinger\/route.ts  -> webfinger\n\u2502   \u251c\u2500\u2500 api\/follow\/route.ts    -> Follow API(temporary)\n\u2502   \u251c\u2500\u2500 api\/announce\/route.ts  -> Boost(Announcement)\n\u2502   \u251c\u2500\u2500 api\/like\/route.ts.     -> Like API\n\u2502   \u251c\u2500\u2500 api\/posts\/route.ts     -> Writing API\n\u2502   \u251c\u2500\u2500 api\/timeline\/route.ts  -> Timeline API\n\u2502   \u251c\u2500\u2500 <span style=\"background-color: initial; font-size: inherit; text-align: initial; color: initial;\">api\/v1\/instance<\/span>\/route.ts -> auth\n\u2502   \u251c\u2500\u2500 api\/v1\/apps\/route.ts.    -> auth\n\u2502   \u251c\u2500\u2500 api\/v1\/accounts\/verify_credentials\/route.ts -> auth\n\u2502   \u251c\u2500\u2500 api\/v1\/statuses\/route.ts -> Write Post\n\u2502   \u251c\u2500\u2500 <span style=\"background-color: initial; font-size: inherit; text-align: initial; color: initial;\">api\/v1\/timelines\/home\/route.ts<\/span> -> timeline\n\u2502   \u251c\u2500\u2500 <span style=\"background-color: initial; font-size: inherit; text-align: initial; color: initial;\">oauth\/authorize\/route.ts<\/span> -> auth\n\u2502   \u251c\u2500\u2500 <span style=\"background-color: initial; font-size: inherit; text-align: initial; color: initial;\">oauth\/token\/route.ts<\/span> -> auth\n\u2502   \u251c\u2500\u2500 <span style=\"background-color: initial; font-size: inherit; text-align: initial; color: initial;\">api\/v1\/search\/home\/route.ts<\/span> -> search\n\u2502   \u251c\u2500\u2500 <span style=\"background-color: initial; font-size: inherit; text-align: initial; color: initial;\">api\/v2\/search\/home\/route.ts<\/span> -> search\n\u2502   \u251c\u2500\u2500 api\/v1\/accounts\/&#91;id]\/followers\/route.ts -> followers\n\u2502   \u251c\u2500\u2500 api\/v1\/accounts\/&#91;id]\/following\/route.ts -> following\n\u2502   \u251c\u2500\u2500 api\/auth\/signup\/route.ts        -> Signup\n\u2502   \u251c\u2500\u2500 api\/auth\/login\/route.ts         -> Login\n\u2502   \u251c\u2500\u2500<strong> <\/strong>api\/auth\/logout\/route.ts        -> Logout\n\u2502   \u251c\u2500\u2500<strong> <\/strong>api\/auth\/refresh\/route.ts       -> Refresh Token\n\u2502   \u251c\u2500\u2500<strong> <\/strong>api\/auth\/me\/route.tsx           -> Login Check<strong>\n<\/strong>\u2502   \u251c\u2500\u2500 auth\/signup\/page.tsx            -> Signup UI\n\u2502   \u251c\u2500\u2500 auth\/signup\/page.tsx            -> Login UI\n\u2502   \u251c\u2500\u2500 users\/&#91;username]\/\n\u2502   \u2502   \u251c\u2500\u2500 statuses\/&#91;id]\/route.ts -> Indivisual Post\n\u2502   \u2502   \u251c\u2500\u2500 route.ts               -> Acotr Information\n\u2502   \u2502   \u251c\u2500\u2500 followers\/route.ts     -> Followers List\n\u2502   \u2502   \u251c\u2500\u2500 following\/route.ts     -> Following List\n\u2502   \u2502   \u251c\u2500\u2500 inbox\/route.ts         -> Inbox\n\u2502   \u2502   \u2514\u2500\u2500 outbox\/route.ts        -> outbox\n\u2502   \u251c\u2500\u2500 usersui\/&#91;username]\/\n\u2502   \u2502   \u251c\u2500\u2500 page.tsx               -> Timeline UI\n\u2502   \u2502   \u251c\u2500\u2500 <strong>followers\/page.tsx.      -> Followers list<\/strong>\n\u2502   \u2502   \u251c\u2500\u2500 <strong>followers\/ClientList.tsx -> Followers,Following list UI<\/strong>\n\u2502   \u2502   \u251c\u2500\u2500 <strong>following\/page.tsx       -> Following list <\/strong>\n\u2502   \u2502   \u2514\u2500\u2500 _components\/themes\/\n\u2502   \u2502       \u251c\u2500\u2500 themeex\/ThemeexTheme.tsx   -> Example Theme\n\u2502   \u2502       \u251c\u2500\u2500 pinafore\/PinaforeTheme.tsx -> Theme 1\n\u2502   \u2502       \u251c\u2500\u2500 mastodon\/MastodonTheme.tsx -> Theme 2\n\u2502   \u2502       \u2514\u2500\u2500 minimal\/MinimaltTheme.tsx  -> Theme 3\n\u2502   \u251c\u2500\u2500 layout.tsx, page.tsx, globals.css\n\u2502   \u2514\u2500\u2500 favicon.ico\n\u251c\u2500\u2500 lib\/\n\u2502   \u251c\u2500\u2500 theme.tsx              -> Theme Provider\n\u2502   \u251c\u2500\u2500 watchThemes.ts         -> Check real-time theme changes\n\u2502   \u251c\u2500\u2500 auth.ts                -> Authentication, User Management\n\u2502   \u251c\u2500\u2500 ap.ts                  -> Follow,Undo,Create,Likes,Announce\n\u2502   \u2514\u2500\u2500 db.ts                  -> DB connection\n\u251c\u2500\u2500 data\/\n\u2502   \u251c\u2500\u2500 keys\/userIDs\/          -> private.pem, public.pem(New)\n\u2502   \u2514\u2500\u2500 keys\/                  -> private.pem, public.pem(legacy)\n\u251c\u2500\u2500 data.sqlite                -> Database(1\/3)\n\u251c\u2500\u2500 data.sqlite-wal            -> Database(2\/3)\n\u251c\u2500\u2500 data.sqlite-shm            -> Database(3\/3)\n\u251c\u2500\u2500 Caddyfile                  -> https \n\u251c\u2500\u2500 instrumentation.ts         -> Background Server\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791 \/ Project Start<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-freelifemakers-org wp-block-embed-freelifemakers-org\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ydui0IptGz\"><a href=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/09\/03\/nextjs-project-summary\/\">[nextjs]\ud504\ub85c\uc81d\ud2b8\uc694\uc57d\/project summary(myapp30+)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;[nextjs]\ud504\ub85c\uc81d\ud2b8\uc694\uc57d\/project summary(myapp30+)&#8221; &#8212; freelifemakers.org\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/09\/03\/nextjs-project-summary\/embed\/#?secret=VSsUnMHVcQ#?secret=ydui0IptGz\" data-secret=\"ydui0IptGz\" width=\"560\" height=\"315\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ucf54\ub4dc\uc218\uc815 \/ Code Modification<\/p>\n\n\n\n<p>\u2714\ufe0f \uac00\uc785\ub418\uc9c0 \uc54a\ub294 \ud398\uc774\uc9c0\ub85c \uc811\uadfc\uc2dc 404 not found \uba54\uc138\uc9c0 \uc548\ub0b4<\/p>\n\n\n\n<p>&#8212; https:\/\/aloy-horizon.duckdns.org\/@user5 \ucc98\ub7fc \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294 \uacc4\uc815\uc73c\ub85c \uc811\uadfc\uc2dc \uc9c0\uae08\uc740 \ube48 \ub370\uc774\ud130 \ud398\uc774\uc9c0\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<br>Currently, accessing a non-existent account\u2014such as https:\/\/aloy-horizon.duckdns.org\/@user5\u2014displays a page with empty data.<\/p>\n\n\n\n<p>&#8212; \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294 \uacc4\uc815\uc73c\ub85c SNS \ud398\uc774\uc9c0\ub97c \uc811\uadfc\uc2dc 404 not found \ud398\uc774\uc9c0\ub85c \uc548\ub0b4 \ud558\ub294 \uc124\uc815\uc785\ub2c8\ub2e4.<br>This setting redirects users to a &#8220;404 Not Found&#8221; page when they attempt to access an SNS page for a non-existent account.<\/p>\n\n\n\n<p>1)page.tsx(server part)\ub97c \uc0c8\ub85c \ub9cc\ub4e4\uace0 \uae30\uc874\uc758 page.tsx\ub97c ClientPage.tsx\ub85c \uc774\ub984 \ubc14\uafb8\uace0 \ucf54\ub4dc \uc218\uc815\ud569\ub2c8\ub2e4.<br>Create a new <code>page.tsx<\/code> (server component), rename the existing <code>page.tsx<\/code> to <code>ClientPage.tsx<\/code>, and modify the code.<\/p>\n\n\n\n<p>A.app\/usersui\/[username]\/page.tsx <\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>\/\/ \u2705 app\/usersui\/&#91;username]\/page.tsx - only server\n\nimport { notFound } from 'next\/navigation';\nimport db from '@\/lib\/db';\nimport ClientPage from '.\/ClientPage'; \n\n\/\/ daynamic\uacfc runtime\uc740 nextjs\uac00 \uc77d\ub294 \uac12 \/ `dynamic` and `runtime` are values \u200b\u200bread by Next.js.\n\/\/ force-dynamic : \uce90\uc2dc \uc801\uc6a9\ud558\uc9c0 \uc54a\uc74c \/ Do not use cache\n\/\/ runtime : DB\uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \uc124\uc815 \/ Configuration for Using the Database\n\nexport const dynamic = 'force-dynamic'; \/\/ no cache\nexport const runtime = 'nodejs'; \/\/ fot db\n\ntype Props = {\n  params: Promise&lt;{ username: string }&gt;;\n};\n\nexport default async function Page({ params }: Props) {\n  const { username } = await params;\n\n  \/\/ DB \uccb4\ud06c \/ Check DB\n  const user = db.prepare('SELECT username FROM users WHERE username = ?').get(username) as { username: string } | undefined;\n\n  \/\/ 404\n<strong>  if (!user) {\n    notFound(); \n  }<\/strong>\n\n  \/\/ - \uc774\uc804\uc758 page.tsx\uc600\ub358 ClientPage.tsx\ud30c\uc77c \ubd88\ub7ec\uc624\uae30 , \uae30\uc874\uc758 params\uc5c6\uc560\uace0 username \uc9c1\uc811 \uc785\ub825\n  \/\/ call client\n  <strong>return &lt;ClientPage username={username} \/&gt;;<\/strong>\n}<\/code><\/pre>\n\n\n\n<p>B.app\/usersui\/[username]\/ClientPage.tsx(\uc774\ub984 \ubcc0\uacbd \/ Change Name)<\/p>\n\n\n\n<p>a.\uae30\uc874\uc758 params\ubd80\ubd84\uc744 \uc9c0\uc6b0\uace0 \ud30c\ub77c\uba54\ud130\ub85c \uc785\ub825\ub41c username \ubcc0\uc218 \ucc98\ub9ac \ud615\ud0dc\ub85c \ubc14\uafc9\ub2c8\ub2e4.<br>Remove the existing <code>params<\/code> section and modify it to handle the <code>username<\/code> variable passed as a parameter.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>... ...\nexport default function <strong>ClientPage({ username }: { username: string })<\/strong> {\n... ...\n  \/\/ \u2705 myapp42 - delete params then\n  useEffect(() =&gt; {\n   <strong> if (!username) return;<\/strong>\n    setLoading(true);\n    fetch(`\/api\/timeline?username=${username}`, { cache: 'no-store' })\n     .then(r =&gt; r.json())\n     .then(data =&gt; {\n        console.log('\ud83d\udce6 timeline', data&#91;0]);\n        setTimeline(data);\n        setLoading(false);\n      })\n     .catch(() =&gt; setLoading(false));\n  }, &#91;username]); \n... ...\n}\n... ...<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ub77c\uc6b0\ud2b8 \ucd94\uac00 \/ Add route<\/p>\n\n\n\n<p>\u2714\ufe0f follow,follwers \ub9ac\uc2a4\ud2b8 \ubd80\ubd84\uc785\ub2c8\ub2e4.<br>This is the section for the following and followers list.<\/p>\n\n\n\n<p>&#8211;\uba3c\uc800 next.config.ts\uc5d0\uc11c @user\/following @user\/follwers\ub85c \uc811\uadfc\uc2dc usersui\/username\/folloing \ub610\ub294 followers\ub85c \uc811\uadfc\ud558\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4.<br>First, configure <code>next.config.ts<\/code> so that accessing <code>@user\/following<\/code> or <code>@user\/followers<\/code> routes to <code>usersui\/username\/following<\/code> or <code>usersui\/username\/followers<\/code>.<\/p>\n\n\n\n<p>1)next.config.ts<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n\n  \/* allow domain*\/\n  allowedDevOrigins: &#91;'aloy-horizon.duckdns.org', '*.duckdns.org'],\n\n  \/* host.domain.org\/@userid *\/\n  async rewrites() {\n    return &#91;\n      {\n        source: '\/@:username',\n        destination: '\/usersui\/:username',\n      },\n      {\n        <strong>source: '\/@:username\/following'<\/strong>,\n        <strong>destination: '\/usersui\/:username\/following'<\/strong>,\n      },\n      {\n        <strong>source: '\/@:username\/followers'<\/strong>,\n        <strong>destination: '\/usersui\/:username\/followers'<\/strong>,\n      },\n    ]\n  },\n  \n};\n\nexport default nextConfig;\n<\/code><\/pre>\n\n\n\n<p>&#8212; app\/usersui\/[username]\/followers\/page.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>... ...\nexport default async function Page({ params }: { params: Promise&lt;{ username: string }> }) {\n... ...\n  if (localUsernames.length > 0) {\n    const placeholders = localUsernames.map(() => '?').join(',');\n    \/\/ \u2705 FIX! acct \ube7c\uace0 display_name\ub9cc!\n    const users = db.prepare(`SELECT username, display_name FROM users WHERE username IN (${placeholders})`).all(...localUsernames) as any&#91;];\n    users.forEach((u: any) => localUsersMap.set(u.username, u));\n  }\n... ...\n return &lt;FollowList username={username} type=\"followers\" users={users} \/>;\n}\n... ...<\/code><\/pre>\n\n\n\n<p>1)username\uc744 \ub370\uc774\ud130 \ubca0\uc774\uc2a4\uc5d0\uc11c \uac80\uc0c9<br>Search for username in the database<\/p>\n\n\n\n<p>2)FollowList \ud398\uc774\uc9c0 \ud638\ucd9c\ud558\uace0 \ud30c\ub77c\uba54\ud130\ub85c username,users,type \uc804\ub2ec<br>Call the FollowList page and pass username, users, and type as parameters.<\/p>\n\n\n\n<p>&#8212; app\/usersui\/[username]\/followers\/ClientList.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>... ...\nexport default function FollowList({ username, type, users }: { username: string, type: 'followers' | 'following', users: any&#91;] }) {\n\n... ...\n       {users.map((u: any) => (\n          &lt;Link key={u.username} href={`\/usersui\/${u.username}`} style={{ textDecoration: 'none', color: 'inherit' }}>\n            &lt;div className=\"follow-row\">\n              {u.avatar? &lt;img src={u.avatar} style={{ width: 46, height: 46, borderRadius: '50%' }} alt=\"\" \/> : &lt;Avatar username={u.username} \/>}\n              &lt;div style={{ flex: 1, minWidth: 0 }}>\n                &lt;div style={{ fontWeight: 700 }}>{u.display_name || u.username}&lt;\/div>\n                &lt;div style={{ fontSize: 13, color: '#657786' }}>@{u.acct || u.username}&lt;\/div>\n                {u.note &amp;&amp; &lt;div style={{ fontSize: 13, marginTop: 4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }} dangerouslySetInnerHTML={{ __html: u.note }} \/>}\n              &lt;\/div>\n            &lt;\/div>\n          &lt;\/Link>\n        ))}\n... ...\n\n}<\/code><\/pre>\n\n\n\n<p>1)\uc2e4\uc81c \ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\ub294 UI<br>UI displayed on the actual screen<\/p>\n\n\n\n<p>2)\uc804\ub2ec \ubc1b\uc740 \ub370\uc774\ud2b8\ub97c \ud654\uba74\ud45c\uc2dc\ud568.<br>Displays the received date on the screen.<\/p>\n\n\n\n<p>&#8212; app\/usersui\/[username]\/following\/page.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>... ...\n<strong>import FollowList from '..\/followers\/ClientList';<\/strong>\n... ...\nexport default async function Page({ params }: { params: Promise&lt;{ username: string }> }) {\n... ...\n  if (localNames.length > 0) {\n    const ph = localNames.map(() => '?').join(',');\n    const users = db.prepare(`SELECT username, display_name FROM users WHERE username IN (${ph})`).all(...localNames) as any&#91;];\n    users.forEach(u => map.set(u.username, u));\n  }\n... ...\nreturn &lt;FollowList username={username} type=\"following\" users={users} \/>;\n}<\/code><\/pre>\n\n\n\n<p>1)username\uc744 \ub370\uc774\ud130 \ubca0\uc774\uc2a4\uc5d0\uc11c \uac80\uc0c9<br>Search for username in the database<\/p>\n\n\n\n<p>2)FollowList \ud398\uc774\uc9c0 \ud638\ucd9c\ud558\uace0 \ud30c\ub77c\uba54\ud130\ub85c username,users,type \uc804\ub2ec<br>Call the FollowList page and pass username, users, and type as parameters.<\/p>\n\n\n\n<p>3)UI\ub294 followers\/ClientList.tsx \ud30c\uc77c\uc744 \uc7ac\uc0ac\uc6a9.<br>The UI reuses the <code>followers\/ClientList.tsx<\/code> file.<\/p>\n\n\n\n<p>\ud83d\udcc1 \ud14c\uc2a4\ud2b8 \/ Test<\/p>\n\n\n\n<p>\u2714\ufe0f \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294 \uacc4\uc815\uc73c\ub85c sns\ud398\uc774\uc9c0 \uc811\uadfc\ud560\uacbd\uc6b0<br>When accessing a social media page for a non-existent account<\/p>\n\n\n\n<p>&#8212; 404 \uc801\uc6a9 \uc804 \/ 404 Before Application<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"612\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-before-jpg.jpg\" alt=\"\" class=\"wp-image-10430\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-before-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-before-jpg-300x230.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-before-jpg-768x588.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-before-jpg-400x306.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">404 \ucc98\ub9ac \uc774\uc804 \/ Before 404 handling<\/figcaption><\/figure>\n\n\n\n<p>&#8212; 404 \uc801\uc6a9 \ud6c4 \/ After applying 404<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"663\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-not_found-jpg.jpg\" alt=\"\" class=\"wp-image-10431\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-not_found-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-not_found-jpg-300x249.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-not_found-jpg-768x636.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-user5-not_found-jpg-400x332.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">404 \ucc98\ub9ac \uc774\ud6c4 \/ After 404 handling<\/figcaption><\/figure>\n\n\n\n<p>\ud83d\udca1 \ud314\ub85c\uc6b0 \ub9ac\uc2a4\ud2b8, \ud314\ub85c\uc6cc\ub9ac\uc2a4\ud2b8 \ubd80\ubd84\uc740 \ub2e4\uc74c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uad6c\uc870 \ubcc0\uacbd \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>The structure of the following and follower lists may be modified in the next project.<\/p>\n\n\n\n<p>\u2714\ufe0f \ud314\ub85c\uc6b0\ub9ac\uc2a4\ud2b8 \/ Follow list<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"724\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-following-list-jpg.jpg\" alt=\"\" class=\"wp-image-10434\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-following-list-jpg.jpg 1012w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-following-list-jpg-300x215.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-following-list-jpg-768x549.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-following-list-jpg-400x286.jpg 400w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-following-list-jpg-800x572.jpg 800w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><figcaption class=\"wp-element-caption\">Follow list<\/figcaption><\/figure>\n\n\n\n<p>\u2714\ufe0f \ud314\ub85c\uc6cc\ub9ac\uc2a4\ud2b8 \/ Follower list<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"581\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-followers-list-jpg.jpg\" alt=\"\" class=\"wp-image-10433\" style=\"width:824px;height:auto\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-followers-list-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-followers-list-jpg-300x218.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-followers-list-jpg-768x558.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp42-followers-list-jpg-400x291.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Followers list<\/figcaption><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\uc694\ud55c\ubcf5\uc74c 8\uc7a5 32\uc808 \/ John 8:32<\/p>\n\n\n\n<p>&#8220;\uadf8\ub9ac\uace0 \ub108\ud76c\ub294 \uc9c4\ub9ac\ub97c \uc54c\uac8c \ub420 \uac83\uc774\uba70, \uc9c4\ub9ac\uac00 \ub108\ud76c\ub97c \uc790\uc720\ub86d\uac8c \ud560 \uac83\uc774\ub2e4.&#8221;<\/p>\n\n\n\n<p>&#8220;Then you will know the truth ,and the truth will set you free&#8221;<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb myapp42\uc5d0\uc11c\ub294 \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294 \uacc4\uc815\uc73c\ub85c sns\ud398\uc774\uc9c0 \uc811\uadfc\uc2dc 404\ud398\uc774\uc9c0\ub85c \uc548\ub0b4\ud569\ub2c8\ub2e4.In myapp42, users are directed to a 404 page when attempting to access an SNS page for a non-existent account. \ud83d\udc49\ud83c\udffb \ud314\ub85c\uc6cc \ubaa9\ub85d,\ud314\ub85c\uc789 \ubaa9\ub85d\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.Implement the follower and following lists. \ud83d\udc49\ud83c\udffb \uc804\uccb4 \ucf54\ub4dc\ub294 \uae43\ud5c8\ube0c\uc5d0\uc11c \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.You can find the full code on GitHub. https:\/\/github.com\/gideonslife01\/flm-nextjs \ud83d\udcc1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,1,7],"tags":[],"class_list":["post-10373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-nextjs","category-uncategorized","category-website","has-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=10373"}],"version-history":[{"count":60,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10373\/revisions"}],"predecessor-version":[{"id":10438,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10373\/revisions\/10438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/10431"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=10373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=10373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=10373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}