{"id":9021,"date":"2026-08-30T07:45:36","date_gmt":"2026-08-29T22:45:36","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=9021"},"modified":"2026-08-30T13:10:34","modified_gmt":"2026-08-30T04:10:34","slug":"nextjs-sns-server-17","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/08\/30\/nextjs-sns-server-17\/","title":{"rendered":"[nextjs]SNS Server-17(myapp27)"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb myapp27\uc5d0\ub294 \uc2a4\ud0a8 \ub514\ub809\ud1a0\ub9ac \uc2e4\uc2dc\uac04 \uc790\ub3d9\uc778\uc2dd\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.<br>Real-time automatic detection of the skin directory is implemented in myapp27.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub514\ub809\ud1a0\ub9ac\ub97c mv \uba85\ub839\uc5b4\ub85c \uc774\ub3d9\ud560\uacbd\uc6b0 \uc624\ub958 \ub85c\uadf8\uac00 \ucd9c\ub825\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>An error log may be displayed when moving a directory using the <code>mv<\/code> command.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ud558\uc9c0\ub9cc 1\ucd08\ub0b4 \ubc14\ub85c \ubcf5\uad6c \uc644\ub8cc \ub429\ub2c8\ub2e4.<br>However, recovery is completed within one second.<\/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\"><code>myapp26\/  \n\u251c\u2500\u2500 app\/  (Next.js App Router)\n\u2502   \u251c\u2500\u2500 .well-known\/webfinger\/route.ts  -&gt; webfinger\n\u2502   \u251c\u2500\u2500 api\/follow\/route.ts    -&gt; Follow API(temporary)\n\u2502   \u251c\u2500\u2500 api\/announce\/route.ts  -&gt; Boost(Announcement)\n\u2502   \u251c\u2500\u2500 api\/like\/route.ts.     -&gt; Like API\n\u2502   \u251c\u2500\u2500 api\/posts\/route.ts     -&gt; Writing API\n\u2502   \u251c\u2500\u2500 api\/timeline\/route.ts  -&gt; Timeline API\n\u2502   \u251c\u2500\u2500 users\/&#91;username]\/\n\u2502   \u2502   \u251c\u2500\u2500 statuses\/&#91;id]\/route.ts -&gt; Indivisual Post\n\u2502   \u2502   \u251c\u2500\u2500 route.ts               -&gt; Acotr Information\n\u2502   \u2502   \u251c\u2500\u2500 followers\/route.ts     -&gt; Followers List\n\u2502   \u2502   \u251c\u2500\u2500 following\/route.ts     -&gt; Following List\n\u2502   \u2502   \u251c\u2500\u2500 inbox\/route.ts         -&gt; Inbox\n\u2502   \u2502   \u2514\u2500\u2500 outbox\/route.ts        -&gt; outbox\n\u2502   \u251c\u2500\u2500 usersui\/&#91;username]\/\n\u2502   \u2502   \u251c\u2500\u2500 page.tsx               -&gt; Timeline UI\n\u2502   \u2502   \u2514\u2500\u2500 _components\/themes\/\n\u2502   \u2502       \u251c\u2500\u2500 <strong>themeex\/ThemeexTheme.tsx   -&gt; Example Theme<\/strong>\n\u2502   \u2502       \u251c\u2500\u2500 pinafore\/PinaforeTheme.tsx -&gt; Theme 1\n\u2502   \u2502       \u251c\u2500\u2500 mastodon\/MastodonTheme.tsx -&gt; Theme 2\n\u2502   \u2502       \u2514\u2500\u2500 minimal\/MinimaltTheme.tsx  -&gt; 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              -&gt; Theme Provider\n\u2502   \u251c\u2500\u2500<strong> watchThemes.ts         -&gt; Check real-time theme changes<\/strong>\n\u2502   \u251c\u2500\u2500 ap.ts                  -&gt; Follow Accept\n\u2502   \u2514\u2500\u2500 db.ts                  -&gt; DB connection\n\u251c\u2500\u2500 data\/\n\u2502   \u2514\u2500\u2500 keys\/                  -&gt; private.pem, public.pem\n\u251c\u2500\u2500 data.sqlite                -&gt; Database\n\u251c\u2500\u2500 Caddyfile                  -&gt; https \n\u251c\u2500\u2500 <strong>instrumentation.ts         -&gt; Background Server<\/strong>\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791(myapp27)<br>Project Start (myapp27)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app@latest<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 SQLite\uc124\uce58 \/ Installing SQLite<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd ~\/myapp27\nnpm install better-sqlite3\nnpm install -D @types\/better-sqlite3<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 DDNS,https\uc124\uc815 \/ DDNS,https settings<\/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=\"nymcS4BkTL\"><a href=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/08\/10\/nextjs-dns-caddy\/\">[nextjs]nextjs+domain(ddns)+https(caddy)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;[nextjs]nextjs+domain(ddns)+https(caddy)&#8221; &#8212; freelifemakers.org\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/08\/10\/nextjs-dns-caddy\/embed\/#?secret=4tLdwAsJ5O#?secret=nymcS4BkTL\" data-secret=\"nymcS4BkTL\" width=\"560\" height=\"315\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\ud83d\udcc1 \ub3c4\uba54\uc778\ud5c8\uc6a9, @userid \uc0ac\uc6a9\ud558\uae30<br>Allowing domains, using @userid<\/p>\n\n\n\n<p>&#8212; next.config.ts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  \/* allow domain*\/\n  allowedDevOrigins: &#91;'aloy-horizon.duckdns.org', '*.duckdns.org'],\n\n  \/* host.domain.org\/@userid *\/\n<strong>  async rewrites() {\n    return &#91;\n      {\n        source: '\/@:username',\n        destination: '\/usersui\/:username',\n      },\n    ]\n  }<\/strong>\n};\n\n\nexport default nextConfig;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ud14c\ub9c8 \ub514\ub809\ud1a0\ub9ac \uc2e4\uc2dc\uac04 \uc790\ub3d9\uc778\uc2dd<br>Real-time automatic detection of theme directories<\/p>\n\n\n\n<p>\u2714\ufe0f \ubaa8\ub4c8\uc124\uce58 \/ module installation<\/p>\n\n\n\n<p>&#8212; \uc2e4\uc2dc\uac04 \ud30c\uc77c \ubc0f \ud3f4\ub354\ubcc0\uacbd \uac10\uc2dc\uae30\ub2a5<br>Real-time file and folder change monitoring function<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -D chokidar<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 \ucf54\ub4dc \uc218\uc815 \ubc0f \ud30c\uc77c \uc0dd\uc131<br>Code modification and file creation<\/p>\n\n\n\n<p>\u2714\ufe0f myapp27\/lib\/watchTheme.ts  -&gt; \ud30c\uc77c \uc0dd\uc131 \/ Create file<\/p>\n\n\n\n<p>&#8212; \uc2e4\uc2dc\uac04 \ud3f4\ub354 \ubc0f \ud30c\uc77c\ubcc0\uacbd\uc744 \uac10\uc9c0\ud569\ub2c8\ub2e4.<br>It detects real-time changes to folders and files.<\/p>\n\n\n\n<p>&#8212; _components\ub514\ub809\ud1a0\ub9ac\ub0b4\uc5d0 index.ts,themeNames.ts\ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc218\uc815\ud569\ub2c8\ub2e4.<br>Create and modify the <code>index.ts<\/code> and <code>themeNames.ts<\/code> files within the <code>_components<\/code> directory.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import fs from 'fs';\nimport path from 'path';\nimport chokidar from 'chokidar';\n\nlet started = false;\n\nexport function watchThemes() { \n... ...\n}<\/code><\/pre>\n\n\n\n<p>1)\uc774 \ud30c\uc77c\uc5d0\uc11c \ud574\ub2f9 \ub514\ub809\ud1a0\ub9ac\ub0b4\uc758 \ud30c\uc77c\uc774\ub098 \ub514\ub809\ud1a0\ub9ac \ubcc0\uacbd\uc774 \uc788\uc73c\uba74 \ud14c\ub9c8\ud30c\uc77c(index.ts,themeNames.ts)\uc744 \uc5c5\ub370\uc774\ud2b8 \ud569\ub2c8\ub2e4.<br>This file updates the theme files (index.ts, themeNames.ts) whenever there are changes to files or directories within the specified directory.<\/p>\n\n\n\n<p>2)index.ts,themeNames.ts\ud30c\uc77c\uc774 \uc5c6\uc73c\uba74 \uc790\ub3d9\uc0dd\uc131\ud569\ub2c8\ub2e4.<br>If the <code>index.ts<\/code> and <code>themeNames.ts<\/code> files do not exist, they are automatically generated.<\/p>\n\n\n\n<p>3)\ud30c\uc77c\uc758 \ub0b4\uc6a9\uc774\ub098 \ub514\ub809\ud1a0\ub9ac\uac00 \ubcc0\uacbd\ub418\uba74 \uac10\uc9c0\ud558\uace0 index.ts,themeNames.ts\ud30c\uc77c\uc758 \ub0b4\uc6a9\uc744 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<br>It detects changes to file contents or directories and updates the contents of <code>index.ts<\/code> and <code>themeNames.ts<\/code>.<\/p>\n\n\n\n<p>\u2714\ufe0f myapp27\/instrumentation.ts -&gt; \ud30c\uc77c \uc0dd\uc131 \/ Create file<\/p>\n\n\n\n<p>&#8212; Nextjs\uc758 \uae30\ub2a5\uc73c\ub85c watchTheme.ts\ub97c \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \uc2e4\ud589\ud558\ub3c4\ub85d\ud569\ub2c8\ub2e4.<br>Use Next.js features to run <code>watchTheme.ts<\/code> in the background.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u2705 myapp27\/instrumentation.ts - Next.js \uc2dc\uc791 \uc2dc \uc790\ub3d9 \uc2e4\ud589  \/ Automatic execution upon Next.js startup\nexport async function register() {\n  if (process.env.NEXT_RUNTIME === 'nodejs') {\n    const { watchThemes } = await import('.\/lib\/watchThemes');\n    \/\/ \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \uc870\uc6a9\ud788 \uac10\uc2dc \uc2dc\uc791 \/ Start monitoring quietly in the background.\n    watchThemes(); \n    console.log('\ud83d\udc40 Theme watcher started in background');\n  }\n}<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0fapp\/usersui\/[username]\/_components\/themes\/page.tsx -&gt; \uc218\uc815 \/ modify<\/p>\n\n\n\n<p>&#8212; \uc774 \ud30c\uc77c\uc5d0\uc11c \uac01 \ud14c\ub9c8\ub514\ub809\ud1a0\ub9ac\uc758 \ud30c\uc77c\uc744 \ubd88\ub7ec \uc635\ub2c8\ub2e4.<br>This file loads the files from each theme directory.<\/p>\n\n\n\n<p>&#8212; theme\ub514\ub809\ud1a0\ub9ac\uc758 \ud14c\ub9c8\ub97c \uc790\ub3d9\uc73c\ub85c \ubd88\ub7ec\uc624\ub3c4\ub85d \ucf54\ub4dc \ubcc0\uacbd\ud588\uc2b5\ub2c8\ub2e4.<br>I modified the code to automatically load the theme from the <code>theme<\/code> directory.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\u2705 myappp27\nimport { themeRegistry, getThemeComponent } from '.\/_components\/themes'; \/\/ \u2705 registry\ub9cc \uc5ec\uae30\uc11c \uac00\uc838\uc624\uae30 \/ Import only the registry from here.\nimport { themeNames } from '.\/_components\/themes\/themeNames'; \/\/ \u2705 names\ub294 \ubd84\ub9ac\ub41c \ud30c\uc77c\uc5d0\uc11c \uac00\uc838\uc624\uae30 \/ names are imported from a separate file\n\n... ...\n\n  if (loading) return &lt;div style={{ padding: 20 }}&gt;Loading...&lt;\/div&gt;;\n\n  const props = { timeline, username, onBoost: handleBoost, onLike: handleLike };\n\n  \/\/ \ud14c\ub9c8 \uc790\ub3d9\ubd84\uae30\ub85c \ubcc0\uacbd \/ Changed to automatic theme switching.\n  const ActiveTheme = getThemeComponent(theme as any) || themeRegistry.pinafore?.component || themeRegistry&#91;themeNames&#91;0]]?.component;\n\n  if (!ActiveTheme) return &lt;div&gt;No themes found&lt;\/div&gt;;\n\n  return &lt;ActiveTheme {...props} \/&gt;;<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f app\/usersui\/[username]\/_components\/themes\/index.js <\/p>\n\n\n\n<p>&#8212; \uc774 \ud30c\uc77c\uc740 \ub9cc\ub4e4\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4. \uc790\ub3d9\uc0dd\uc131\ub429\ub2c8\ub2e4.<br>You do not need to create this file; it is generated automatically.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { MastodonTheme } from '.\/mastodon\/MastodonTheme';\nimport { MinimalTheme } from '.\/minimal\/MinimalTheme';\nimport { PinaforeTheme } from '.\/pinafore\/PinaforeTheme';\nimport { ThemeexTheme } from '.\/themeex\/ThemeexTheme';\n\nexport const themeRegistry = {\n mastodon: { component: MastodonTheme, label: 'mastodon' },\n minimal: { component: MinimalTheme, label: 'minimal' },\n pinafore: { component: PinaforeTheme, label: 'pinafore' },\n themeex: { component: ThemeexTheme, label: 'themeex' },\n} as const;\nexport type ThemeName = keyof typeof themeRegistry;\nexport function getThemeComponent(name: ThemeName) {\n  return themeRegistry&#91;name]?.component;\n}<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f app\/usersui\/[username]\/_components\/themes\/themeNames.ts <\/p>\n\n\n\n<p>&#8212; \uc774 \ud30c\uc77c\uc740 \ub9cc\ub4e4\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4. \uc790\ub3d9\uc0dd\uc131\ub429\ub2c8\ub2e4.<br>You do not need to create this file; it is generated automatically.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export const themeNames = &#91;\"mastodon\",\"minimal\",\"pinafore\",\"themeex\"] as const;\nexport type ThemeName = typeof themeNames&#91;number];<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f app\/usersui\/[username]\/_components\/themes\/pinafore\/PinaforeTheme.tsx -&gt; \ud30c\uc77c \uc218\uc815 \/ Modify file<\/p>\n\n\n\n<p>&#8212; \ub2e4\ub978 \ud14c\ub9c8\ud30c\uc77c\uc740 \uc218\uc815\ud558\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. myapp26\uc758 \ub0b4\uc6a9\uacfc \uac19\uc2b5\ub2c8\ub2e4.<br>I did not modify any other theme files. They are identical to the contents of myapp26.<\/p>\n\n\n\n<p>&#8212; themeex\ub294 \ud14c\uc2a4\ud2b8\uc6a9 \ud14c\ub9c8\ub85c PinaforeTheme.tsx\uc640 \uac70\uc758 \uac19\uc2b5\ub2c8\ub2e4.<br>themeex is a test theme that is almost identical to PinaforeTheme.tsx.<\/p>\n\n\n\n<p>&#8212; PinaforeTheme.tsx\uc5d0\ub294 select\uba54\ub274\ubd80\ubd84\uc744 themeNames\uc5d0\uc11c \uc77d\uc5b4 \uc635\ub2c8\ub2e4.<br>In PinaforeTheme.tsx, the select menu section reads from <code>themeNames<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'use client';\nimport { useTheme } from '@\/lib\/theme';\nimport { themeNames } from '..\/themeNames'; \/\/ \u2705 myapp27\nimport { ThemeName } from '..';\n\n... ...\n\n          {\/* \u2705myapp27 - ..\/themeNames.ts*\/}\n          &lt;select value={theme || themeNames&#91;0]} onChange={handleChange}&gt;\n            {themeNames.map(name =&gt; (\n              &lt;option key={name} value={name}&gt;{name}&lt;\/option&gt;\n            ))}\n          &lt;\/select&gt;<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 \ud14c\uc2a4\ud2b8 \/ Test<\/p>\n\n\n\n<p>&#8212; \uc2e0\uaddc \ud14c\ub9c8 \ud30c\uc77c \uc5c5\ub85c\ub4dc \/ Upload New Theme File<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>etc % mv themeex \/Users\/gimdaegyeong\/Desktop\/app\/NextJS\/myapp27\/app\/usersui\/&#91;username]\/_components\/themes\/\n\/Users\/gimdaegyeong\/Desktop\/app\/NextJS\/myapp27\/app\/usersui\/&#91;username]\/_components\/themes\/\n\netc % mv themeex \/Users\/gimdaegyeong\/Desktop\/app\/NextJS\/myapp27\/app\/usersui\/'&#91;username]'\/_components\/themes\/\n\n<\/code><\/pre>\n\n\n\n<p>&#8212; \uc11c\ubc84 \uc6b4\uc601\uc911 \ud14c\ub9c8 \uc5c5\ub85c\ub4dc\uc2dc \ud14c\ub9c8\uc5d0 \uc790\ub3d9\ubc18\uc601\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"336\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-servername-jpg.jpg\" alt=\"\" class=\"wp-image-9098\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-servername-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-servername-jpg-300x126.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-servername-jpg-768x323.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-servername-jpg-400x168.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Server log<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"261\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-theme-jpg.jpg\" alt=\"\" class=\"wp-image-9099\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-theme-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-theme-jpg-300x98.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-theme-jpg-768x251.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/myapp27-theme-jpg-400x131.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Timeline<\/figcaption><\/figure>\n\n\n\n<p>\ud83d\udcc1 \uacfc\uc815\uc815\ub9ac \/ Process Summary<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc2e4\uc2dc\uac04 \ud30c\uc77c \ubc0f \ub514\ub809\ud1a0\ub9ac \ubcc0\uacbd \uac10\uae30 \ud655\uc778 \ubaa8\ub4c8\uc124\uce58(chokidar)<br>Install the module for real-time file and directory change monitoring (chokidar).<br><\/li>\n\n\n\n<li>.\/lib\/watchTheme.ts \ud30c\uc77c\uc0dd\uc131(\uc2e4\uc2dc\uac04 \ud30c\uc77c \ubcc0\uacbd \uac10\uc2dc \uc11c\ubc84)<br>Create the .\/lib\/watchTheme.ts file (a server for monitoring real-time file changes).<br><\/li>\n\n\n\n<li>watchTheme.ts\ub97c \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \uc2e4\ud589\ud558\uae30 \uc704\ud574\uc11c instrument.ts \ud30c\uc77c\uc0dd\uc131<br>Create the instrument.ts file to run watchTheme.ts in the background.<br><\/li>\n\n\n\n<li>watchThems.ts\uc2e4\ud589\uc2dc _components\/themes\ub514\ub809\ud1a0\ub9ac\ub0b4\uc5d0 index.ts\uc640 themeNames.ts\ud30c\uc77c\uc744  \uc0dd\uc131\ud558\uace0 \uc218\uc815\ud569\ub2c8\ub2e4.<br>When watchTheme.ts runs, it generates and updates the index.ts and themeNames.ts files within the _components\/themes directory.<br><\/li>\n\n\n\n<li>theme\/page.tsx\ud30c\uc77c\uc5d0\uc11c \uc0dd\uc131\ub41c \ud30c\uc77c(index.ts,themeNames.ts)\uc744 \ubd88\ub7ec\uc635\ub2c8\ub2e4.<br>Import the generated files (index.ts, themeNames.ts) into theme\/page.tsx.<br><\/li>\n\n\n\n<li>\ubd88\ub7ec\uc628 \ud30c\uc77c\uc758 \ub0b4\uc6a9\uacfc \uc77c\uce58\ud558\ub294 \ud14c\ub9c8\ub97c \ubd88\ub7ec\uc624\uace0 \ud14c\ub9c8 select\uba54\ub274\uc5d0\ub3c4 \ubc18\uc601\ud569\ub2c8\ub2e4. <br>Load the theme corresponding to the content of the imported files and reflect it in the theme selection menu.<\/li>\n<\/ol>\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 myapp27\uc5d0\ub294 \uc2a4\ud0a8 \ub514\ub809\ud1a0\ub9ac \uc2e4\uc2dc\uac04 \uc790\ub3d9\uc778\uc2dd\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.Real-time automatic detection of the skin directory is implemented in myapp27. \ud83d\udc49\ud83c\udffb \ub514\ub809\ud1a0\ub9ac\ub97c mv \uba85\ub839\uc5b4\ub85c \uc774\ub3d9\ud560\uacbd\uc6b0 \uc624\ub958 \ub85c\uadf8\uac00 \ucd9c\ub825\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.An error log may be displayed when moving a directory using the mv command. \ud83d\udc49\ud83c\udffb \ud558\uc9c0\ub9cc 1\ucd08\ub0b4 \ubc14\ub85c \ubcf5\uad6c \uc644\ub8cc \ub429\ub2c8\ub2e4.However, recovery is completed within one second. \ud83d\udc49\ud83c\udffb \uc804\uccb4 [&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-9021","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\/9021","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=9021"}],"version-history":[{"count":80,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/9021\/revisions"}],"predecessor-version":[{"id":9104,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/9021\/revisions\/9104"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=9021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=9021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=9021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}