{"id":12427,"date":"2026-10-18T09:36:53","date_gmt":"2026-10-18T00:36:53","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=12427"},"modified":"2026-10-18T18:07:55","modified_gmt":"2026-10-18T09:07:55","slug":"webui-tailwind-nextjs-5","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/10\/18\/webui-tailwind-nextjs-5\/","title":{"rendered":"[WebUI]Tailwind + nextjs(Horizantal Nav Menu) \u2013 5"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uc5ec\uae30\uc11c\ub294 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\ub54c \uc0c1\ub2e8 \uba54\ub274 \ubd80\ubd84\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.
Here, we will create the top menu section for the website.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc5ec\ub7ec\uac00\uc9c0 \ud0c0\uc785\uc774 \uc788\uc9c0\ub9cc \uc624\ub298\uc740 \uc218\ud3c9 \ub124\ube44\uac8c\uc774\uc158 \uba54\ub274\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.(Horizontal Nav Menu)
There are various types, but today we will create a horizontal navigation menu.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uba54\ub274\ub97c \ucef4\ud3ec\ub10c\ud2b8 \ud615\uc2dd\uc73c\ub85c \ub9cc\ub4e4\uc5c8\uace0 tailwindcss\ub97c \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4.
I created the menu as a component and used Tailwind CSS.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ub108\ubb34 \ucf54\ub4dc\uac00 \uae38\uc5b4\uc838\uc11c \uc5ec\uae30\uc11c\ub294 tailwindcss\ub85c\ub9cc \uc9c4\ud589\ud569\ub2c8\ub2e4.
Since the code has become too long, I will proceed using only Tailwind CSS here.<\/p>\n\n\n\n

\ud83d\udcc1 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870 \/ Directory structure<\/p>\n\n\n\n

tailwindcss-nextjs\/\n\u2514\u2500\u2500 app\/\n    \u251c\u2500\u2500 layout.tsx\n    \u251c\u2500\u2500 page.tsx (\ub8e8\ud2b8)\n    \u251c\u2500\u2500 globals.css\n    \u251c\u2500\u2500 favicon.ico\n    \u2502\n    \u251c\u2500\u2500 ui\/                          \u2190 components\n    \u2502   \u251c\u2500\u2500 page.tsx             \n    \u2502   \u2514\u2500\u2500 _components\/            \n    \u2502       \u251c\u2500\u2500 button.tsx           \u2190 Button\n    \u2502       \u251c\u2500\u2500 dropdown.tsx\n    \u2502       \u2514\u2500\u2500 navigation\/\n    \u2502           \u2514\u2500\u2500 HorizontalNavMenu.tsx  \u2190 NavMenu\n    \u2502\n    \u251c\u2500\u2500 hmenu\/                       \u2190 Menu test route\n    \u2502   \u251c\u2500\u2500 layout.tsx               \u2190 layout\n    \u2502   \u251c\u2500\u2500 page.tsx                 \u2190 \/hmenu\n    \u2502   \u251c\u2500\u2500 game\/ -> page.tsx        \u2190 \/hmenu\/game\n    \u2502   \u251c\u2500\u2500 music\/ -> page.tsx       \u2190 \/hmenu\/music\n    \u2502   \u251c\u2500\u2500 profile\/ -> page.tsx     \u2190 \/hmenu\/profile\n    \u2502   \u2514\u2500\u2500 help\/ -> page.tsx        \u2190 \/hmenu\/help\n    \u2502\n    \u251c\u2500\u2500 button-css\/ , button-tailwind\/ , card-css\/ ... (\uc608\uc81c \ud398\uc774\uc9c0\ub4e4\/Example pages)\n    \u2514\u2500\u2500 form-css\/ , form-tailwind\/ ...<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uc544\uc774\ud53c\uc8fc\uc18c\ud5c8\uc6a9 \/ Allow IP address<\/p>\n\n\n\n
\u2714\ufe0f next.config.ts\uc758 \ucf54\ub4dc\ub97c \uc544\ub798\ucc98\ub7fc \uc218\uc815\ud569\ub2c8\ub2e4.
Modify the code in next.config.ts<\/code> as shown below.<\/p>\n\n\n\n
import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  \/* config options here *\/\n allowedDevOrigins: ['192.168.0.10', '192.168.0.*'],\n};\n\nexport default nextConfig;\n<\/code><\/pre>\n\n\n\n
1)192.168.0.10\uc740 \uc5ec\ub7ec\ubd84\uc758 \uc544\uc774\ud53c \uc8fc\uc18c\ub97c \uc785\ub825\ud558\uba74\ub429\ub2c8\ub2e4.
You should enter your IP address where 192.168.0.10 is shown.<\/p>\n\n\n\n
2)\uc774 \ubd80\ubd84\uc744 \uc218\uc815\ud558\uc9c0 \uc54a\uc73c\uba74 \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/your ip address\/hmenu \uc774\ub807\uac8c \uc2e4\ud589\ud558\uba74 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
If you do not modify this part, the JavaScript will not function when you access http:\/\/your ip address\/hmenu from a mobile browser.<\/p>\n\n\n\n
3)\uc704\uc758 \uc544\uc774\ud53c\ub97c \ud5c8\uc6a9\ud558\uace0 \uc811\uc18d\ud558\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \uba54\ub274\ub97c \ud14c\uc2a4\ud2b8 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
Once you allow the IP address mentioned above and connect, you will be able to test the menu on mobile devices as expected.<\/p>\n\n\n\n
\ud83d\udcc1 \uba54\ub274 \ucef4\ud3ec\ub10c\ud2b8 \/ Menu Component<\/p>\n\n\n\n
\u2714\ufe0f \uba54\ub274\ub294 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4.
The menu was created as a component.<\/p>\n\n\n\n
\u2714\ufe0f app\/ui\/_components\/navigation\/HoriztalNavMenu.tsx<\/p>\n\n\n\n
\u2714\ufe0f \uba54\ub274\ub77c\ubca8 \ubc0f \ub77c\uc6b0\ud2b8
Menu Labels and Routes<\/p>\n\n\n\n
const LINKS = [\n  { label: '\uac8c\uc784\/Game', href: '\/hmenu\/game' },\n  { label: '\uc74c\uc545\/Music', href: '\/hmenu\/music' },\n  { label: '\ud504\ub85c\ud544\/Profile', href: '\/hmenu\/profile' },\n  { label: '\ubb38\uc758\/Help', href: '\/hmenu\/help' },\n]<\/code><\/pre>\n\n\n\n
1) label\uc740 \uba54\ub274\uc5d0\uc11c \ubcf4\uc5ec\uc904 \ud14d\uc2a4\ud2b8\uc774\uace0 href\ub294 \uc2e4\uc81c \uc774\ub3d9\ud560 \ud398\uc774\uc9c0 \ub77c\uc6b0\ud2b8 \uc785\ub2c8\ub2e4.
‘label’ is the text to be displayed in the menu, and ‘href’ is the actual page route to navigate to.<\/p>\n\n\n\n
\u2714\ufe0f \ud648 \ub514\ub809\ud1a0\ub9ac \ub9c1\ud06c,PC\uc6a9 \uba54\ub274
Home directory link, menu for PC<\/p>\n\n\n\n
        <a href=\"\/hmenu\" className=\"text-xl font-black\">freelifemakers<\/a>\n        \n        {\/** PC *\/}\n        <nav className=\"hidden md:flex gap-6\">\n          {LINKS.map(l => (\n            <Link \n              key={l.href} \n              href={l.href}\n              className={`text-sm font-medium ${pathname === l.href ? 'text-black font-bold underline' : 'text-gray-600'}`}\n            >\n              {l.label}\n            <\/Link>\n          ))}\n        <\/nav><\/code><\/pre>\n\n\n\n
1)\uba54\ub274\uc5d0\uc11c freelifemakers\ub97c \ud074\ub9ad\ud558\uba74 \ud648\ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.
Clicking “freelifemakers” in the menu will take you to the home directory.<\/p>\n\n\n\n
2)<nav> … <\/nav>\uc758 \ucf54\ub4dc\ub294 PC\uc5d0\uc11c \ubcf4\uc5ec\uc9c0\ub294 \uba54\ub274\uc785\ub2c8\ub2e4.
The code within <nav> … <\/nav> represents the menu displayed on PCs.<\/p>\n\n\n\n
3) <nav className=”hidden md:flex gap-6″>
\uc774 \ucf54\ub4dc\ub294 \ubaa8\ubc14\uc77c\uc5d0\uc120 \uc228\uae30\uace0, PC(md \uc774\uc0c1)\uc5d0\uc11c\ub9cc \ubcf4\uc774\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4.
This code is set to be hidden on mobile and visible only on PC (md size and up).<\/p>\n\n\n\n
4)md\ub294 768px md:hidden md\uac12\ubcf4\ub2e4 \ud654\uba74\uc774 \ud06c\uba74 \ud654\uba74\uc5d0 \uba54\ub274\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.
The md<\/code> breakpoint is 768px; md:hidden<\/code> means the menu will be displayed on screen whenever the screen size is larger than this md<\/code> value.<\/p>\n\n\n\n
\u2714\ufe0f \ubaa8\ubc14\uc77c\uc6a9 \uba54\ub274 \/ Menu for mobile<\/p>\n\n\n\n
    const [mobileOpen, setMobileOpen<\/strong>] = useState(false)\n  ... ...   \n  <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onPointerUp={() => setMobileOpen<\/strong>(v => !v)} \/\/ onClick \ub300\uc2e0 onPointerUp(\ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801) \/ Use onPointerUp instead of onClick (optimized for mobile)\n            \/\/ mobile \n            className=\"md:hidden<\/strong> w-11 h-11 flex items-center justify-center rounded-full bg-gray-100 active:bg-gray-200 touch-manipulation\"\n          >\n            <span className=\"text-xl\">{mobileOpen ? '\u2715' : '\u2630'}<\/span>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      {mobileOpen<\/strong> && (\n        <div className=\"md:hidden absolute top-16 left-0 w-full bg-white border-t px-6 py-6 flex flex-col gap-2 shadow-xl\">\n          <div className=\"text-xs text-green-600 bg-green-50 p-2 rounded\">Menu<\/div>\n          {LINKS.map(l => (\n            <Link key={l.href} href={l.href} onClick={() => setMobileOpen(false)} className=\"py-3 font-medium\">\n              {l.label}\n            <\/Link>\n          ))}\n        <\/div>\n      )}<\/code><\/pre>\n\n\n\n
1)md:hidden \uc740 md(768px)\ubcf4\ub2e4 \ud654\uba74\uc774 \ud06c\uba74 \uba54\ub274\ub97c \uc228\uae30\uace0 768px\ubcf4\ub2e4 \uc791\uc544\uc9c0\uba74 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.(\ubaa8\ubc14\uc77c\uc6a9)
md:hidden<\/code> hides the menu when the screen is larger than md<\/code> (768px) and displays it when the screen is smaller than 768px (for mobile use).<\/p>\n\n\n\n
2) {mobileOpen<\/strong> && ( … ) } \uc774 \ubd80\ubd84\uc740 \ubaa8\ubc14\uc77c \uc6a9\uc73c\ub85c \ud584\ubc84\uac70 \uba54\ub274\ub97c \ub204\ub974\uba74 \ub098\ud0c0\ub098\ub294 \uba54\ub274\uc785\ub2c8\ub2e4.
The {mobileOpen && ( ... )}<\/code> section represents the menu that appears when the hamburger menu is clicked on mobile devices.<\/p>\n\n\n\n
3)mobileOpen\uc758 \uac12\uc744 true,false\ub85c \ubc18\uc804\uc2dc\ucf1c\uc11c \uba54\ub274\ub97c open,close\ud569\ub2c8\ub2e4.
Toggling the value of mobileOpen<\/code> between true<\/code> and false<\/code> opens or closes the menu.<\/p>\n\n\n\n
4)\uba54\ub274 \uc5f4\ub9bc,\ub2eb\ud798 \ub85c\uc9c1\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
The logic for opening and closing the menu is as follows.<\/p>\n\n\n\n
1. \ubcc0\uc218\uc124\uc815 \/ Variable setting\nconst [mobileOpen, setMobileOpen<\/strong>] = useState(false)\n\n2.\uba54\ub274 \uc5f4\ub9bc,\ub2eb\ud798 \ubc84\ud2bc \/ Menu open\/close button\n<button type=\"button\" onPointerUp={() => setMobileOpen<\/strong>(v => !v)} > ... <\/button>\n\n3.mobileOPen\uc758 \uc0c1\ud0dc\uc5d0 \ub530\ub77c \ubcf4\uc5ec\uc904 \uba54\ub274, \ub9c1\ud06c \ud074\ub9ad\ud558\uba74 \uba54\ub274 \ub2eb\uae30\nDisplay the menu based on the state of `mobileOpen`; close the menu when a link is clicked.\n\n{mobileOpen<\/strong> && ( ... ...\n\n<Link key={l.href} href={l.href} onClick={() => setMobileOpen(false)<\/strong>} \n      className=\"py-3 font-medium\">{l.label}\n<\/Link>\n )<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udcc1 \uba54\ub274 \uc801\uc6a9 \/ Apply Menu<\/p>\n\n\n\n
\u2714\ufe0f Layout.tsx\ud30c\uc77c\uc5d0\uc11c \uc804\uccb4 \ud398\uc774\uc9c0\uc5d0 \uba54\ub274\uac00 \uc801\uc6a9\ub420 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.
In the Layout.tsx file, ensure that the menu is applied to the entire page.<\/p>\n\n\n\n
import { NavMenu } from '..\/ui\/_components\/navigation\/HorizontalNavMenu'<\/strong>\n\nexport default function HmenuLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <>\n      <NavMenu \/><\/strong>\n      <main className=\"min-h-screen bg-gray-50\">\n        <div className=\"mx-auto max-w-6xl px-6 py-20\">\n          {children}\n        <\/div>\n      <\/main>\n    <\/>\n  )\n}<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uba54\uc778\ud398\uc774\uc9c0 \/ Main Page<\/p>\n\n\n\n
\u2714\ufe0f \uba54\ub274\ub97c Layout.tsx\uc5d0 \uc801\uc6a9\ud588\uae30\ub54c\ubb38\uc5d0 \uc5ec\uae30\uc11c\ub294 \uba54\ub274\ub97c \ub530\ub85c \uc801\uc6a9\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
Since the menu has been applied in Layout.tsx, it is not applied separately here.<\/p>\n\n\n\n
'use client'\nimport { Button } from '..\/ui\/_components\/button'\n\nexport default function MainPage() {\n  return (\n    <>\n      <main className=\"min-h-screen bg-gray-50\">\n        <div className=\"mx-auto max-w-6xl px-6 py-20\">\n          <h1 className=\"text-4xl font-bold\">HorizontalNavMenu<\/h1>\n          <p className=\"text-gray-500 mt-2\">\uae30\ubcf8 \ub124\ube44\uac8c\uc774\uc158 \uba54\ub274\uc785\ub2c8\ub2e4.<\/p>\n          <p className=\"text-gray-500 mt-2\">This is the default navigation menu.<\/p>\n          <div className=\"flex gap-x-4 m-4\">\n            <div>\n            <Button onClick={() => alert('button test')} >Button test<\/Button>\n            <\/div>\n            <div>\n            <Button onClick={() => console.log('Game Start')}>Game STart<\/Button>\n            <\/div>\n            <\/div>\n        <\/div>\n      <\/main>\n    <\/>\n  )\n}<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uc11c\ube0c\ud398\uc774\uc9c0 \/ Subpage<\/p>\n\n\n\n
\u2714\ufe0f \uba54\ub274\uc758 \uc11c\ubc84\ud398\uc774\uc9c0\ub294 \ucf54\ub4dc\uac00 \ubaa8\ub450 \ub3d9\uc77c\ud569\ub2c8\ub2e4.
The server pages for the menu all contain identical code.<\/p>\n\n\n\n
\u2714\ufe0f \ud398\uc774\uc9c0\ub97c \uad6c\ubcc4\ud558\uae30\uc704\ud55c \ud14d\uc2a4\ud2b8\ub9cc \ub2e4\ub985\ub2c8\ub2e4. \uc544\ub798\ub294 \/game \ub77c\uc6b0\ud2b8\uc758 \ud398\uc774\uc9c0 \ucf54\ub4dc\uc785\ub2c8\ub2e4.
Only the text used to distinguish the pages differs. Below is the page code for the \/game route.<\/p>\n\n\n\n
'use client'\n\nexport default function MainPage() {\n  return (\n    <>\n      <h1 className=\"text-4xl font-bold\">\uac8c\uc784 \ud398\uc774\uc9c0<\/h1>\n      <p className=\"text-gray-500 mt-2\">Game Page<\/p>\n    <\/>\n  )\n}<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \ubc84\ud2bc \ucef4\ud3ec\ub10c\ud2b8 \uc218\uc815 \/ Modify button component<\/p>\n\n\n\n
\u2714\ufe0f \uae30\uc874\uc758 \ubc84\ud2bc \ub85c\uc9c1\uc740 onClick\ub4f1\uc758 \ud30c\ub77c\uba54\ud130(Props)\ub97c \ubc1b\uc744 \uc218 \uc5c6\uc5b4\uc11c \uc218\uc815\ud588\uc2b5\ub2c8\ub2e4.
I modified the existing button logic because it could not accept parameters (props) such as onClick<\/code>.<\/p>\n\n\n\n
'use client'\ntype ButtonProps = {\n  children: React.ReactNode\n  onClick?: () => void\n} & React.ButtonHTMLAttributes<HTMLButtonElement>\n\nexport function Button({ children, onClick, ...props }: ButtonProps<\/strong>) {\n  return (\n    <button \n      onClick={onClick}\n      {...props}\n      className=\"px-4 py-2 bg-blue-600 text-white rounded-xl text-sm font-bold \n      active:bg-blue-700 touch-manipulation\">\n      {children}\n    <\/button>\n  )\n}<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \ud14c\uc2a4\ud2b8  \/ Test<\/p>\n\n\n\n
\u2714\ufe0f PC<\/p>\n\n\n\n
1) \uba54\uc778\ud398\uc774\uc9c0 \/ Main Page<\/p>\n\n\n\n
\"\"
Main Page<\/figcaption><\/figure>\n\n\n\n
2) \uc11c\ube0c \ud398\uc774\uc9c0 \/ Subpage<\/p>\n\n\n\n
\"\"
Game Page<\/figcaption><\/figure>\n\n\n\n
\"\"
Music Page<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f Mobile<\/p>\n\n\n\n
\n
\"\"
Menu Close<\/figcaption><\/figure>\n\n\n\n
\"\"
Menu Open<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \uc5ec\uae30\uc11c\ub294 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\ub54c \uc0c1\ub2e8 \uba54\ub274 \ubd80\ubd84\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.Here, we will create the top menu section for the website. \ud83d\udc49\ud83c\udffb \uc5ec\ub7ec\uac00\uc9c0 \ud0c0\uc785\uc774 \uc788\uc9c0\ub9cc \uc624\ub298\uc740 \uc218\ud3c9 \ub124\ube44\uac8c\uc774\uc158 \uba54\ub274\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.(Horizontal Nav Menu)There are various types, but today we will create a horizontal navigation menu. \ud83d\udc49\ud83c\udffb \uba54\ub274\ub97c \ucef4\ud3ec\ub10c\ud2b8 \ud615\uc2dd\uc73c\ub85c \ub9cc\ub4e4\uc5c8\uace0 tailwindcss\ub97c \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4.I created the menu as a component and […]<\/p>\n","protected":false},"author":1,"featured_media":12469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,1,7,29],"tags":[],"class_list":["post-12427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-uncategorized","category-website","category-webui","has-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12427","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=12427"}],"version-history":[{"count":44,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12427\/revisions"}],"predecessor-version":[{"id":12477,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12427\/revisions\/12477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/12469"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=12427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=12427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=12427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}