{"id":7068,"date":"2026-08-01T10:28:21","date_gmt":"2026-08-01T01:28:21","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=7068"},"modified":"2026-08-02T10:36:06","modified_gmt":"2026-08-02T01:36:06","slug":"nextjs-app-route-description","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/08\/01\/nextjs-app-route-description\/","title":{"rendered":"[nextjs]\uc571\ub77c\uc6b0\ud2b8 \uc124\uba85\/App route description"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb \ubc14\ub85c \uc774\uc804 \ud3ec\uc2a4\ud2b8\uc758 \uc571 \ub77c\uc6b0\ud2b8 \ubc29\uc2dd\uc744 \uc124\uba85\ud569\ub2c8\ub2e4.<br>This explains the app routing method from the previous post.<\/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=\"cbAZDlxm8O\"><a href=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/07\/31\/nextjs-approute-pageroute\/\">[nextjs]\uc571\ub77c\uc6b0\ud2b8,\ud398\uc774\uc9c0\ub77c\uc6b0\ud2b8\/App Route,Page Route<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;[nextjs]\uc571\ub77c\uc6b0\ud2b8,\ud398\uc774\uc9c0\ub77c\uc6b0\ud2b8\/App Route,Page Route&#8221; &#8212; freelifemakers.org\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/07\/31\/nextjs-approute-pageroute\/embed\/#?secret=PPgGg7bM0o#?secret=cbAZDlxm8O\" data-secret=\"cbAZDlxm8O\" width=\"560\" height=\"315\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uac00\uc7a5 \ucd5c\uadfc\uc5d0 \ub3c4\uc785\ub41c \ub77c\uc6b0\ud2b8 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<br>This is the most recently introduced routing method.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb\ub514\ub809\ud1a0\ub9ac \uad6c\uc870<br>Directory Structure<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>myapp3\/\n\u2514\u2500\u2500 app\/                        # 1.\uc571\ub77c\uc6b0\ud2b8 \/ App Router\n    \u251c\u2500\u2500 api\/                    # 1)\ubc31\uc5d4\ub4dc API \/ BackEnd API\n    \u2502   \u2514\u2500\u2500 guestbookapp\/        \n    \u2502       \u2514\u2500\u2500 route.js        # App Router API : \/api\/guestbookse\n    \u2514\u2500\u2500 guestbookapp\/            # 2)\ud504\ub860\ud2b8 \uc564\ub4dc \/ FrontEnd\n        \u2514\u2500\u2500 page.tsx            # App Router Front: \/guestbookse<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ubaa8\ub4c8 \ubc0f \ub370\uc774\ud130 \uc815\uc758(route.js)<br>Module and Data Definitions (route.js)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { NextResponse } from 'next\/server';\n\nconst guestbookData = &#91;\n  { id: 1, name: '2B', content: '\ub2c8\uc5b4\uc624\ud1a0\ub9c8\ud0c0 \/ Nier:Automata' },\n  { id: 2, name: '9S', content: 'Next.js API App Routes.' },\n];\n<\/code><\/pre>\n\n\n\n<p>1) next\/server \ubaa8\ub4c8\uc758 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<br>The functions of the <code>next\/server<\/code> module are as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>- JSON \ub370\uc774\ud130 \uc751\ub2f5: \ud074\ub77c\uc774\uc5b8\ud2b8 API \uc694\uccad\uc5d0 \ub370\uc774\ud130 \ub3cc\ub824\uc8fc\uae30 (.json())\nJSON Data Response: Returning data for client API requests (.json())\n\n- \ucfe0\ud0a4\/\ud5e4\ub354 \uc870\uc791: \ub85c\uadf8\uc778 \ud1a0\ud070\uc744 \uc2ec\uac70\ub098 \ubcf4\uc548 \ud5e4\ub354 \uc124\uc815\ud558\uae30 (.cookies.set(), .headers.set())\nCookie\/Header Manipulation: Injecting login tokens or setting security headers (.cookies.set(), .headers.set())\n\n- \ud398\uc774\uc9c0 \uc774\ub3d9: \uc0ac\uc6a9\uc790\ub97c \ub2e4\ub978 URL\ub85c \ud295\uaca8\ub0b4\uae30 (.redirect())\nPage redirection: Redirecting the user to another URL (.redirect())\n\n- \ub0b4\ubd80 \uacbd\ub85c \ubc14\uafb8\uae30: \uc8fc\uc18c\ucc3d\uc740 \uadf8\ub300\ub85c \ub450\uace0 \uc11c\ubc84 \uc548\uc5d0\uc11c\ub9cc \ud654\uba74 \uc804\ud658\ud558\uae30 (.rewrite())\nChanging internal paths: Switching screens within the server while keeping the address bar unchanged (.rewrite())<\/code><\/pre>\n\n\n\n<p>2) \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ub300\uc2e0\uc5d0 \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ubc30\ud3ec\ud658\uacbd\uc5d0\uc11c\ub294 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub85c \ubcc0\uacbd\ud574\uc57c\ud569\ub2c8\ub2e4.<br>An array is used instead of a database. You must switch to a database for the production environment.<\/p>\n\n\n\n<p>\ud83d\udcc1 \ub370\uc774\ud130 \uac00\uc838\uc624\uae30 \/ Import Data<\/p>\n\n\n\n<p>&#8212; route.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ GET \uc694\uccad \ucc98\ub9ac (\ub370\uc774\ud130 \uc870\ud68c)\n\/\/ Handle GET requests (data retrieval)\nexport async function GET() {\n  return NextResponse.json(guestbookData);\n}<\/code><\/pre>\n\n\n\n<p>1)route.js\ub294 Nextjs\ub77c\ub294 \uc11c\ubc84\uc5d0\uc11c \ud638\ucd9c\ub418\uc5b4 \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc989 Nextjs \uc790\uccb4\uac00 \uc11c\ubc84\uc785\ub2c8\ub2e4.<br><code>route.js<\/code> is code that is called and executed within a Next.js server environment; in other words, Next.js itself acts as the server.<\/p>\n\n\n\n<p>2)\ucc98\uc74c\uc5d0 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc811\uc18d\uc2dc guestbookData\ub97c json\ud615\uc2dd\uc73c\ub85c \uc751\ub2f5\ud569\ub2c8\ub2e4.<br>When initially accessing the browser, it responds with <code>guestbookData<\/code> in JSON format.<\/p>\n\n\n\n<p>&#8212; page.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \ubc29\uba85\ub85d \ub370\uc774\ud130\uc758 \ud0c0\uc785 \uc815\uc758\n\/\/ Define the type for guestbook data\ninterface <strong>GuestbookItem<\/strong> {\n  id: number;\n  name: string;\n  content: string;\n}\n \nconst &#91;posts, <strong>setPosts<\/strong>] = useState&lt;<strong>GuestbookItem<\/strong>&#91;]&gt;(&#91;]);\n\n... \uc911\ub7b5\/Omitted ...  \n\nconst <strong>fetchPosts<\/strong> = async () =&gt; {\n    try {\n      const response = await fetch(\"\/api\/guestbookapp\");\n      if (!response.ok) throw new Error(\"\ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4. \/ Failed to fetch data.\");\n      const data = await response.json();\n      <strong>setPosts(data);<\/strong>\n    } catch (error) {\n      console.error(error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  \/\/ \ud398\uc774\uc9c0\uac00 \ucc98\uc74c \ucf1c\uc9c8 \ub54c API \ud638\ucd9c\ud558\uae30\n  \/\/ Call the API when the page first loads\n  useEffect(() =&gt; {\n    <strong>fetchPosts();<\/strong>\n  }, &#91;]);<\/code><\/pre>\n\n\n\n<p>1) \ucc98\uc74c \ube0c\ub77c\uc6b0\uc800\uc5d0 http:\/\/localhost:3000\/guestabookapp \uc811\uc18d\uc2dc \uc11c\ubc84(route.js)\uc5d0 GET\ubc29\uc2dd\uc73c\ub85c \uc811\uc18d\ud569\ub2c8\ub2e4.<br>When you first access http:\/\/localhost:3000\/guestabookapp in your browser, you connect to the server (route.js) using the GET method.<\/p>\n\n\n\n<p>2) \uc774\ub54c route.js\uc5d0\uc11c \uc751\ub2f5\ub41c guestbookData \ubc30\uc5f4\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<br>At this point, the data from the <code>guestbookData<\/code> array returned by <code>route.js<\/code> is retrieved.<\/p>\n\n\n\n<p>3) setPosts\ud568\uc218\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud569\ub2c8\ub2e4.<br>Store the data in the setPosts function.<\/p>\n\n\n\n<p>\ud83d\udcc1 \ubc29\uba85\ub85d \ub370\uc774\ud130 \ucd9c\ub825\ud558\uae30<br>Displaying Guestbook Data<\/p>\n\n\n\n<p>&#8212; page.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      {\/* \ubc29\uba85\ub85d \ubaa9\ub85d \ucd9c\ub825 \/ Guestbook Entry List *\/}\n      &lt;h2 className=\"text-2xl font-bold text-gray-800\"&gt;\ucd5c\uadfc \ubc29\uba85\ub85d \ubaa9\ub85d \/ Recent Guestbook Entries&lt;\/h2&gt;\n      {isLoading ? (\n        &lt;p&gt;\ub85c\ub529 \uc911\/Loading...&lt;\/p&gt;\n      ) : posts.length === 0 ? (\n        &lt;p&gt;\uc791\uc131\ub41c \ubc29\uba85\ub85d\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. \uccab \uae00\uc744 \ub0a8\uaca8\ubcf4\uc138\uc694! \/ There are no guestbook entries yet. Be the first to leave a message!&lt;\/p&gt;\n      ) : (\n        &lt;ul style={{ listStyle: \"none\", padding: 0 }}&gt;\n          {<strong>posts.map<\/strong>((post) =&gt; (\n            &lt;li key={post.id} style={{ borderBottom: \"1px solid #eee\", padding: \"15px 0\" }}&gt;\n              &lt;strong&gt;{post.name}&lt;\/strong&gt;\n              &lt;p style={{ margin: \"5px 0 0 0\", color: \"#555\" }}&gt;{post.content}&lt;\/p&gt;\n            &lt;\/li&gt;\n          ))}\n        &lt;\/ul&gt;\n      )}<\/code><\/pre>\n\n\n\n<p>1)setPosts\ub85c \uc800\uc7a5\ub41c \uac12\uc744 posts.map\uc73c\ub85c \ub370\uc774\ud130\ub97c \ud654\uba74\uc5d0 \ucd9c\ub825\ud569\ub2c8\ub2e4.<br>The data stored via <code>setPosts<\/code> is rendered to the screen using <code>posts.map<\/code>.<\/p>\n\n\n\n<p>2)post\ub294 \ub9e4\uac1c\ubcc0\uc218\uc785\ub2c8\ub2e4.<br>&#8216;post&#8217; is a parameter.<\/p>\n\n\n\n<p>3)posts\uc758 \ubc30\uc5f4 \uac12\uc744 post\ub77c\ub294 \uac1d\uccb4 \ud615\uc2dd\uc73c\ub85c \uc800\uc815\ub418\uc5b4 post.id,post.name\ub4f1\uc73c\ub85c \ucd9c\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>The values \u200b\u200bin the <code>posts<\/code> array are stored as <code>post<\/code> objects, allowing you to output them using properties such as <code>post.id<\/code> and <code>post.name<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ub370\uc774\ud130 \uc800\uc7a5\ud558\uae30<br>Saving data<\/p>\n\n\n\n<p>&#8212; page.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      {\/* \ubc29\uba85\ub85d \uc785\ub825 \ud3fc \/ Guestbook Entry Form *\/}\n      &lt;form onSubmit={<strong>handleSubmit<\/strong>} style={{ display: \"flex\", flexDirection: \"column\", gap: \"10px\", margin: \"20px 0\" }}&gt;\n        &lt;input\n          type=\"text\"\n          placeholder=\"\uc774\ub984\/Name\"\n          value={name}\n          <strong>onChange={(e) =&gt; setName(e.target.value)}<\/strong>\n          style={{ padding: \"8px\", border: \"1px solid #ccc\", borderRadius: \"4px\" }}\n        \/&gt;\n        &lt;textarea\n          placeholder=\"\ub0b4\uc6a9\uc744 \uc785\ub825\ud558\uc138\uc694\/Please enter your message\"\n          value={content}\n          <strong>onChange={(e) =&gt; setContent(e.target.value)}<\/strong>\n          style={{ padding: \"8px\", border: \"1px solid #ccc\", borderRadius: \"4px\", minHeight: \"8px\" }}\n        \/&gt;\n        &lt;button type=\"submit\" style={{ padding: \"10px\", backgroundColor: \"#dcd809\", color: \"white\", border: \"none\", borderRadius: \"4px\", cursor: \"pointer\" }}&gt;\n          \ub4f1\ub85d\ud558\uae30\/Submit\n        &lt;\/button&gt;\n      &lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>1) submit\ubc84\ud2bc\uc744 \ub204\ub974\uba74 handleSubmit \ud568\uc218\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.<br>When the submit button is clicked, the handleSubmit function is executed.<\/p>\n\n\n\n<p>2)Input\uacfc textarea\uc5d0 \uc785\ub825\ub41c \uac12\uc774 \ubc14\ub00c\uba74 \uc785\ub825\ub41c \uc804\uccb4 \ub370\uc774\ud130\ub97c setName\uacfc setContent\ud568\uc218\ub85c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<br>When the values \u200b\u200bentered into the input and textarea change, the entire input data is updated using the <code>setName<\/code> and <code>setContent<\/code> functions.<\/p>\n\n\n\n<p>3)setName\uacfc setContent\ub85c \uac12\uc774 \ubc14\ub00c\uba74 \ud654\uba74\uc758 UI\ub97c \ub2e4\uc2dc \uadf8\ub9bd\ub2c8\ub2e4.<br>When the values \u200b\u200bare changed via <code>setName<\/code> and <code>setContent<\/code>, the screen&#8217;s UI is redrawn.<\/p>\n\n\n\n<p>&#8212; page.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \/\/ \uc0c8 \ubc29\uba85\ub85d \ub4f1\ub85d\ud558\ub294 \ud568\uc218 (POST)\n  \/\/ Function to register a new guestbook entry (POST)\n  const <strong>handleSubmit <\/strong>= async (e: React.FormEvent) =&gt; {\n    e.preventDefault(); \/\/ \uc0c8\ub85c\uace0\uce68 \ubc29\uc9c0 \/ Prevent page refresh\n\n    if (!name.trim() || !content.trim()) {\n      alert(\"\uc774\ub984\uacfc \ub0b4\uc6a9\uc744 \ubaa8\ub450 \uc785\ub825\ud574 \uc8fc\uc138\uc694.\/Please enter both name and content.\");\n      return;\n    }\n\n    try {\n      const response = await fetch(\"\/api\/guestbookapp\", {\n        method: \"<strong>POST<\/strong>\",\n        headers: { \"Content-Type\": \"application\/json\" },\n        body: JSON.stringify({ name, content }),\n      });\n\n      if (response.ok) {\n        \/\/ -- \ubc31\uc5d4\ub4dc\uc5d0\uc11c \ub3cc\ub824\uc900 \ub370\uc774\ud130\ub97c \ud65c\uc6a9\ud560 \uacbd\uc6b0-- \n        \/\/ If you want to use the data returned from the backend\n        \/\/ const newPost = await response.json();\n        \/\/ setPosts((prevPosts) =&gt; &#91;newPost, ...prevPosts]); \/\/ \uc0c8 \uae00\uc744 \ubaa9\ub85d\uc5d0 \ucd94\uac00 \/ Add the new entry to the list\n        \/\/ --\n\n        \/\/ -- \ubc31\uc5d4\ub4dc\uc5d0\uc11c \ub3cc\ub824\uc900 \ub370\uc774\ud130\ub97c \ud65c\uc6a9\ud558\uc9c0 \uc54a\uace0 \ub370\uc774\ud130\ub97c \uac31\uc2e0\ud558\ub294 \uacbd\uc6b0 --\n        \/\/ If you don't want to use the data returned from the backend and just update the data\n        \/\/ \ub4f1\ub85d \uc131\uacf5 \uc2dc \uc785\ub825\ucc3d\uc744 \ube44\uc6b0\uace0 \ubaa9\ub85d \uc0c8\ub85c\uace0\uce68\n        \/\/ If registration is successful, clear the input fields and refresh the list\n        setName(\"\");\n        setContent(\"\");\n        <strong>fetchPosts();<\/strong>\n      } else {\n        alert(\"\ub4f1\ub85d\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.\/Failed to register the entry.\");\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  };<\/code><\/pre>\n\n\n\n<p>1)\/api\/guestbookapp \uc774 API(router.js)\uc5d0 POST\ubc29\uc2dd\uc73c\ub85c name,content \uac12\uc744 \uc804\uc1a1\ud569\ub2c8\ub2e4.<br>Send <code>name<\/code> and <code>content<\/code> values \u200b\u200bvia a POST request to the <code>\/api\/guestbookapp<\/code> API (router.js).<\/p>\n\n\n\n<p>2) \ub370\uc774\ud130 \ub4f1\ub85d\uc774 \uc131\uacf5\ud558\uba74 fetchPosts()\ub85c \uac31\uc2e0\ub41c \ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc635\ub2c8\ub2e4.<br>If the data registration is successful, the updated data is fetched using fetchPosts().<\/p>\n\n\n\n<p>&#8212; route.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ POST \uc694\uccad \ucc98\ub9ac (\ub370\uc774\ud130 \ub4f1\ub85d)\n\/\/ Handle POST requests (data registration)\nexport async function POST(request) {\n  const body = await request.json();\n  const { name, content } = body;\n\n  if (!name || !content) {\n    return NextResponse.json({ message: '\uc774\ub984\uacfc \ub0b4\uc6a9\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694. \/ Please enter both name and content.' }, { status: 400 });\n  }\n\n  const <strong>newPost<\/strong> = {\n    id: Date.now(),\n    name,\n    content,\n  };\n\n<strong>  guestbookData.push(newPost);\n  return NextResponse.json(newPost, { status: 201 });<\/strong>\n}<\/code><\/pre>\n\n\n\n<p>1)page.tsx\ud3fc\uc744 \ud1b5\ud574\uc11c POST\ubc29\uc2dd\uc73c\ub85c \uc804\uc1a1\ub41c \uac11\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4.<br>It processes the data sent via the POST method from the page.tsx form.<\/p>\n\n\n\n<p>2)guestbookData\ubc30\uc5f4\uc5d0 \ud3fc\uc5d0\uc11c\uc804\uc1a1\ub41c \ub370\uc774\ud130\uc640 \uc9c0\uae08\ub0a0\uc9dc\ub97c \ub354\ud574\uc11c newPost\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.<br>Create <code>newPost<\/code> by combining the data submitted from the form with the current date and adding it to the <code>guestbookData<\/code> array.<\/p>\n\n\n\n<p>3)\ub9cc\ub4e4\uc5b4\uc9c4 newPost\ub97c guestbookData\uc5d0 \uc800\uc7a5\ud558\uace0 json\ub370\uc774\ud130\ub85c \uc131\uacf5\uba54\uc138\uc9c0(status:201)\ub97c \uc804\uc1a1\ud569\ub2c8\ub2e4.<br>Save the created <code>newPost<\/code> to <code>guestbookData<\/code> and send a success message (status: 201) as JSON data.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ud398\uc774\uc9c0 \ub77c\uc6b0\ud130 \ubd80\ubd84\uc740 \ub530\ub85c \uc124\uba85\ud558\uc9c0 \uc54a\uaca0\uc2b5\ub2c8\ub2e4.<br>I will not go into detail about the page router.<\/p>\n\n\n\n<p>\ud83d\udcc1 \uc571\ub77c\uc6b0\ud2b8\ub97c \uc774\ud574\ud558\uc2dc\uba74 \ud398\uc774\uc9c0 \ub77c\uc6b0\ud2b8\ub294 \uc27d\uac8c \uc774\ud574 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>If you understand app routes, page routes are easy to grasp.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb \ubc14\ub85c \uc774\uc804 \ud3ec\uc2a4\ud2b8\uc758 \uc571 \ub77c\uc6b0\ud2b8 \ubc29\uc2dd\uc744 \uc124\uba85\ud569\ub2c8\ub2e4.This explains the app routing method from the previous post. \ud83d\udc49\ud83c\udffb \uac00\uc7a5 \ucd5c\uadfc\uc5d0 \ub3c4\uc785\ub41c \ub77c\uc6b0\ud2b8 \ubc29\uc2dd\uc785\ub2c8\ub2e4.This is the most recently introduced routing method. \ud83d\udc49\ud83c\udffb\ub514\ub809\ud1a0\ub9ac \uad6c\uc870Directory Structure \ud83d\udcc1 \ubaa8\ub4c8 \ubc0f \ub370\uc774\ud130 \uc815\uc758(route.js)Module and Data Definitions (route.js) 1) next\/server \ubaa8\ub4c8\uc758 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.The functions of the next\/server module are as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,1,7],"tags":[],"class_list":["post-7068","post","type-post","status-publish","format-standard","hentry","category-nextjs","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7068","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=7068"}],"version-history":[{"count":67,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7068\/revisions"}],"predecessor-version":[{"id":7139,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7068\/revisions\/7139"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=7068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=7068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=7068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}