{"id":10576,"date":"2026-09-21T08:01:46","date_gmt":"2026-09-20T23:01:46","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=10576"},"modified":"2026-09-21T11:35:00","modified_gmt":"2026-09-21T02:35:00","slug":"nextjs-sns-server-34","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/09\/21\/nextjs-sns-server-34\/","title":{"rendered":"[nextjs]SNS Server-34(myapp44)\u00a0"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb myapp44\uc5d0\uc11c\ub294 myapp43\ud314\ub85c\uc789,\ud314\ub85c\uc6cc \ub9ac\uc2a4\ud2b8\ucc98\ub7fc \uc54c\ub9bc\uc744  pinafore \ud14c\ub9c8\uc5d0 \ud3ec\ud568\uc2dc\ud0b5\ub2c8\ub2e4.<br>In myapp44, notifications\u2014similar to the following and follower lists in myapp43\u2014are included in the Pinafore theme.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc54c\ub9bc API\ub294 \uae30\uc874\uc758 \uac83\uc744 \uc7ac\ud65c\uc6a9\ud569\ub2c8\ub2e4.(app\/api\/v1\/notifications\/route.ts)<br>The notification API reuses the existing one (app\/api\/v1\/notifications\/route.ts)<\/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 api\/followinglist\/route.ts  -> followinglist API\n\u2502   \u251c\u2500\u2500 api\/followerslist\/route.ts  -> followerslist 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(Server, 404)\n\u2502   \u2502   \u251c\u2500\u2500 ClientPage.tsx.        -> Timeline UI(Client,Call Active Themes)\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 pinafore\/FollowersList.tsx -> Theme 1, FollowersList\n\u2502   \u2502       \u251c\u2500\u2500 pinafore\/FollowingList.tsx -> Theme 1, FollowingList\n\u2502   \u2502       \u251c\u2500\u2500 <strong>pinafore\/NotificationsList.tsx -> Theme 1, NotificationsList<\/strong>\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=\"pa0gEdPaHE\"><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=lK0Szs9tyC#?secret=pa0gEdPaHE\" data-secret=\"pa0gEdPaHE\" 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 next.config.ts<\/p>\n\n\n\n<p>&#8212; \ud14c\ub9c8\ud30c\uc77c\uc5d0\uc11c notifications \ubd80\ubd84\uc744 \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574\uc11c initialview \uc804\uc1a1 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<br>Add the code to pass the <code>initialView<\/code> in order to display the notifications section in the theme file.<\/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        source: '\/@:username\/following',\n        destination: '\/usersui\/:username?view=following', \/\/ \u2705 myapp43 - initialView\n      },\n      {\n        source: '\/@:username\/followers',\n        destination: '\/usersui\/:username?view=followers',\n      },\n<strong>      { source: '\/@:username\/notifications', \/\/ \u2705 myapp44 - initialView for notifications\n        destination: '\/usersui\/:username?view=notifications' \n      },<\/strong>\n    ]\n  },\n  \n};\n\nexport default nextConfig;\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f notification\ub77c\uc6b0\ud2b8\ub294 \ub530\ub85c \ub9cc\ub4e4\uc9c0 \uc54a\uace0 \uae30\uc874 \ub77c\uc6b0\ud2b8\ub97c \uc7ac\ud65c\uc6a9\ud569\ub2c8\ub2e4.<br>Instead of creating a separate notification route, the existing route is reused.<\/p>\n\n\n\n<p>&#8212; app\/api\/v1\/notifications\/route.ts<\/p>\n\n\n\n<p>\u2714\ufe0f \uc5d1\ud2f0\ube0c \ud14c\ub9c8 \uae30\ub2a5\uc73c\ub85c \ud14c\ub9c8\ub514\ub809\ud1a0\ub9ac \ub0b4\uc758 \ud30c\uc77c\uc774\ub984\uc5d0 &#8220;List&#8221;\uac00 \uc788\uc73c\uba74 \ud14c\ub9c8\ud30c\uc77c\ub85c \uc778\uc2dd\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.(\uc774\uc804 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ucc98\ub9ac \ud568.)<br>Due to the active theme feature, files in the theme directory with &#8220;List&#8221; in their names are not recognized as theme files (this was handled in a previous project).<\/p>\n\n\n\n<p>&#8212; lib\/watchThemes <\/p>\n\n\n\n<p>\u2714\ufe0f app\/usersui\/[username]\/_components\/theme\/pinafore\/PinaforeTheme.tsx <\/p>\n\n\n\n<p>&#8212; \ubcc0\uc218\uc804\ub2ec \/ Variable passing : paget.tsx -&gt; ClientPage.tsx -&gt; pinafore\/PinaforeTheme.tsx<\/p>\n\n\n\n<p>&#8212; initialview(=view)\ubcc0\uc218\uc758 \uc804\ub2ec\uc740 myap43\uc5d0\uc11c \ucc98\ub9ac\ud588\uae30 \ub54c\ubb38\uc5d0 \ud14c\ub9c8\ud30c\uc77c\uc5d0\uc11c\ub9cc \uc218\uc815\ud569\ub2c8\ub2e4.<br>Since the passing of the <code>initialview<\/code> (or <code>view<\/code>) variable is handled in <code>myap43<\/code>, you only need to make modifications in the theme file.<\/p>\n\n\n\n<p>&#8212; Home \ubc84\ud2bc\ud074\ub9ad\uc2dc\ub294 \ud0c0\uc784\ub77c\uc778\uc774 \ubcf4\uc774\ub3c4\ub85d \uc218\uc815\ud569\ub2c8\ub2e4.<br>The Home button is being modified so that the timeline appears when clicked.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:14px\"><code>... ...\nimport NotificationsList from '.\/NotificationsList'; \/\/ \u2705 myapp44\n... ...\nexport function PinaforeTheme({ timeline, username, initialView, onBoost, onLike }: any) {\n... ...\n  \/\/ \u2705 myapp43 + myapp44\n  const &#91;view, setView] = useState&lt;'timeline' | 'followers' | 'following' | 'notifications'&gt;(initialView || 'timeline');\n... ...\n          {\/** \u2705 myapp44 *\/}\n          &lt;button \n            onClick={(e) =&gt; switchView(e, 'timeline')}\n            style={{ fontWeight: view === 'timeline' ? 800 : 400 }}\n          &gt;\n            \ud83c\udfe0 Home\n          &lt;\/button&gt;\n          &lt;button \n            onClick={(e) =&gt; switchView(e, 'notifications')}\n            style={{ fontWeight: view === 'notifications' ? 800 : 400 }}\n          &gt;\n            \ud83d\udd14 Notifications\n          &lt;\/button&gt;\n... ...\n          {view === 'notifications' &amp;&amp; (\n            &lt;NotificationsList username={username} style={{ padding: '0' }} \/&gt;\n          )}\n\n}<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 \ud14c\uc2a4\ud2b8 \/ Test<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp44-notifications-jpg.jpg\" alt=\"\" class=\"wp-image-10610\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp44-notifications-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp44-notifications-jpg-300x161.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp44-notifications-jpg-768x412.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/09\/myapp44-notifications-jpg-400x215.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Notifications<\/figcaption><\/figure>\n\n\n\n<p><\/p>\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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb myapp44\uc5d0\uc11c\ub294 myapp43\ud314\ub85c\uc789,\ud314\ub85c\uc6cc \ub9ac\uc2a4\ud2b8\ucc98\ub7fc \uc54c\ub9bc\uc744 pinafore \ud14c\ub9c8\uc5d0 \ud3ec\ud568\uc2dc\ud0b5\ub2c8\ub2e4.In myapp44, notifications\u2014similar to the following and follower lists in myapp43\u2014are included in the Pinafore theme. \ud83d\udc49\ud83c\udffb \uc54c\ub9bc API\ub294 \uae30\uc874\uc758 \uac83\uc744 \uc7ac\ud65c\uc6a9\ud569\ub2c8\ub2e4.(app\/api\/v1\/notifications\/route.ts)The notification API reuses the existing one (app\/api\/v1\/notifications\/route.ts) \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 \uc804\uccb4 \ud504\ub85c\uc81d\ud2b8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,1,7],"tags":[],"class_list":["post-10576","post","type-post","status-publish","format-standard","hentry","category-news","category-nextjs","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10576","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=10576"}],"version-history":[{"count":36,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10576\/revisions"}],"predecessor-version":[{"id":10670,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10576\/revisions\/10670"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=10576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=10576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=10576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}