https:\/\/tailwindcss.com<\/a><\/p>\n\n\n\n\ud83d\udc49\ud83c\udffb \ud398\uc774\uc9c0 \ud0c0\uc774\ud2c0 \uc88c\uce21\uc758 \uac00\uc6b4\ub370 \uc0bc\uac01\ud615 \ubaa8\uc591\uc758 \uc544\uc774\ucf58\uc740 \ucef4\ud30c\uc77c \ud45c\uc2dc\uae30\ub85c \uac1c\ubc1c\uc790\uc6a9\uc785\ub2c8\ub2e4.
\ud83d\udc49\ud83c\udffb \ud398\uc774\uc9c0 \uc88c\uce21 \ud558\ub2e8\uc758 \uac00\uc6b4\ub370 N \ubaa8\uc591\uc758 \uba54\ub274\ub294 \uac1c\ubc1c\ud45c\uc2dc\uae30(Next.js Dev Indicator)\ub85c \uac1c\ubc1c\uc790\uc6a9\uc785\ub2c8\ub2e4.
\ud83d\udcc1 \uc124\uba85 \/ Description<\/p>\n\n\n\n
\u2714\ufe0f \uae30\ubcf8 \ud0c0\uc774\ud2c0 \ubcc0\uacbd
— Layout.tsx<\/p>\n\n\n\n
\/\/ 3. \ud398\uc774\uc9c0 \ud0c0\uc774\ud2c0 \ubc0f \uc124\uba85\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \/ Set the page title and description.\nexport const metadata: Metadata = {\n title: \"\ub450 \ubc88\uc9f8 Next.js \uc571 \/ Second Next.js App \",\n description: \"Generated by create next app\",\n};<\/code><\/pre>\n\n\n\n\u2714\ufe0f \ud55c\uae00 \ud3f0\ud2b8 \uc801\uc6a9 \/ Apply Korean font<\/p>\n\n\n\n
— Layout.tsx<\/p>\n\n\n\n
import { Geist, Geist_Mono,Noto_Sans_KR<\/strong> } from \"next\/font\/google\";\n\n... \uc911\ub7b5 \/ omitted ...\n\nconst notoSansKr = Noto_Sans_KR({\n variable: \"--font-noto-sans-kr<\/strong>\",\n subsets: [\"latin\"], \n \/\/ \uc0ac\uc6a9\ud560 \uad75\uae30 \uc9c0\uc815 (\uc77c\ubc18, \ubbf8\ub514\uc6c0, \uad75\uac8c)\n \/\/ Specify the weights to use (normal, medium, bold)\n weight: [\"400\", \"500\", \"700\"],\n});\n\n... \uc911\ub7b5 \/ omitted ...\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n <html\n lang=\"ko\"\n className={`${geistSans.variable} ${geistMono.variable} ${notoSansKr.variable}<\/strong> h-full antialiased`}\n >\n <body className=\"min-h-full flex flex-col\">{children}<\/body>\n <\/html>\n );\n}<\/code><\/pre>\n\n\n\n— global.css<\/p>\n\n\n\n
@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n \/* --font-noto-sans-kr \ubcc0\uc218\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4 \/ Add --font-noto-sans-kr variable *\/\n --font-sans: var(--font-noto-sans-kr),<\/strong> var(--font-geist-sans), sans-serif<\/strong>;\n --font-mono: var(--font-geist-mono);\n}\n\n... \uc911\ub7b5 \/ Omitted ...\n\nbody {\n background: var(--background);\n color: var(--foreground);\n \/*font-family: Arial, Helvetica, sans-serif;*\/\n\n \/* \uae30\uc874 Arial \ub300\uc2e0 Tailwind\uc758 \uae30\ubcf8 sans \ud3f0\ud2b8 \uaddc\uce59\uc744 \ub530\ub974\ub3c4\ub85d \uc218\uc815\ud569\ub2c8\ub2e4 \/ \n Modify to follow Tailwind's default sans font rules *\/\n font-family: var(--font-sans);\n}<\/code><\/pre>\n\n\n\n1)\uad75\uc740 \uae00\uc528\ub85c \ud45c\uc2dc\ub41c \ubd80\ubd84\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.
2)sans-serif\ub294 \ud3f0\ud2b8 \ub2e4\uc6b4\ub85c\ub4dc \uc2e4\ud328\uc2dc \uc801\uc6a9\ud560 \ud3f0\ud2b8\uc785\ub2c8\ub2e4.sans-serif<\/code> is the font to be applied if the font download fails.<\/p>\n\n\n\n\u2714\ufe0f \ud30c\uc77c\uae30\ubc18 \ub77c\uc6b0\ud305 \/ File-based Routing<\/p>\n\n\n\n
— project\/app\ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0\uc11c about \ub514\ub809\ud1a0\ub9ac\ub97c \ub9cc\ub4e4\uace0 \ub514\ub809\ud1a0\ub9ac \uc548\uc5d0 page.tsx\ud30c\uc77c\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.about<\/code> directory within the project\/app<\/code> directory, and create a page.tsx<\/code> file inside it.<\/p>\n\n\n\nmyapp2\/\n\u2514\u2500\u2500 app\/\n \u251c\u2500\u2500 about\/\n \u2502 \u2514\u2500\u2500 page.tsx<\/strong>\n \u251c\u2500\u2500 favicon.ico\n \u251c\u2500\u2500 globals.css\n \u251c\u2500\u2500 layout.tsx\n \u2514\u2500\u2500 page.tsx\n<\/code><\/pre>\n\n\n\n— page.tsx\ud30c\uc77c\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.page.tsx<\/code> file.<\/p>\n\n\n\n\/\/ app\/about\/page.tsx\nexport default function AboutPage() {\n return (\n <div className=\"p-8\">\n <h1 className=\"text-3xl font-bold text-blue-600 mb-4\">\uc18c\uac1c \ud398\uc774\uc9c0 \/ About Page<\/h1>\n <p className=\"text-gray-600\">\uc548\ub155\ud558\uc138\uc694! Next.js\ub85c \ub9cc\ub4e0 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.<\/p>\n <p className=\"text-gray-600\">Hello! This is a page built with Next.js.<\/p>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\n— npm run dev\ub85c \uc11c\ubc84\ub97c \uc2e4\ud589\ud558\uace0 \ube0c\ub77c\uc6b0\uc800\uc5d0 http:\/\/localhost:3000\/about\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
— \uadf8\ub7ec\uba74 \uc544\ub798\ucc98\ub7fc \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc5d0 about\/page.tsx \ud30c\uc77c\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4.about\/page.tsx<\/code> file will execute and appear on the browser screen as shown below.<\/p>\n\n\n\n— \uc774\uac83\uc744 \ud30c\uc77c\uae30\ubc18 \ub77c\uc6b0\ud305\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4.about page<\/figcaption><\/figure>\n\n\n\n\u2714\ufe0f \ud398\uc774\uc9c0 \ub9c1\ud06c \/ page link<\/p>\n\n\n\n
— project\/page.tsx<\/p>\n\n\n\n
\/\/ Next.js\uc758 Link \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0c1\ub2e8\uc5d0\uc11c \uac00\uc838\uc635\ub2c8\ub2e4.\nimport Link from \"next\/link\";\n\n... \uc911\ub7b5 \/ Omitted ...\n\n {\/* 2. Link \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\ub3d9 \ubc84\ud2bc\uc744 \ub9cc\ub4ed\ub2c8\ub2e4. \/ \n Create a navigation button using the Link component. *\/}\n <div className=\"pt-4\">\n <Link \n href=\"\/about\" \n className=\"inline-block bg-purple-600 hover:bg-purple-700 text-white font-medium px-6 py-3 rounded-xl shadow-md transition-colors duration-200\"\n >\n About page\u2192\n <\/Link><\/strong>\n <\/div><\/code><\/pre>\n\n\n\n1)page.tsx\ud30c\uc77c\uc5d0 about\ub514\ub809\ud1a0\ub9ac \ub0b4\uc758 page.tsx\ud30c\uc77c\uc758 \ub9c1\ud06c\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.page.tsx<\/code> file located in the about<\/code> directory within the page.tsx<\/code> file.<\/p>\n\n\n\nmain <\/figcaption><\/figure>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb nextjs\uc5d0\uc11c \ud3f0\ud2b8,\ud0c0\uc774\ud2c0,\ub77c\uc6b0\ud305\uc5d0 \ub300\ud574\uc11c \uc124\uba85\ud569\ub2c8\ub2e4.This section explains fonts, titles, and routing in Next.js. \u2705 github\ud504\ub85c\uc81d\ud2b8\ub294 myapp2\uc785\ub2c8\ub2e4.The GitHub project is myapp2. https:\/\/github.com\/gideonslife01\/flm-nextjs \ud83d\udc49\ud83c\udffb Nextjs\uc5d0\ub294 tailwind4 css\uac00 \uc801\uc6a9\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.Tailwind CSS v4 is applied to the Next.js project. \u2714\ufe0f globals.css \ud83d\udc49\ud83c\udffb tailwind css \uacf5\uc2dd \ubb38\uc11c\ub294 \uc544\ub798\uc758 \ub9c1\ud06c\ub97c \ucc38\uc870\ud558\uc138\uc694Please refer to the link below for the official Tailwind CSS […]<\/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-6934","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\/6934","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=6934"}],"version-history":[{"count":45,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/6934\/revisions"}],"predecessor-version":[{"id":6983,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/6934\/revisions\/6983"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=6934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=6934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=6934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/about-page-jpg.jpg\")
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/root-page-jpg.jpg\")