{"id":915,"date":"2026-05-20T09:56:45","date_gmt":"2026-05-20T01:56:45","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-typescript-integration-24\/"},"modified":"2026-05-20T09:56:45","modified_gmt":"2026-05-20T01:56:45","slug":"nextjs-typescript-integration-24","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-typescript-integration-24\/","title":{"rendered":"TypeScript \ud1b5\ud569 \u2014 \ud0c0\uc785 \uc548\uc804 Next.js"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 861 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#4f46e5;--color-accent:#6366f1;--color-bg:#fafbfc;--color-bg-card:#fff;--color-text:#1a202c;--color-text-muted:#64748b;--hero-start:#1e1b4b;--hero-end:#4338ca;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#a78bfa;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#c7d2fe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#eef2ff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#4338ca;}\n.databox{background:#eef2ff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#c7d2fe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">Next.js \uad50\uc7ac \u00b7 24\ud3b8 \u00b7 TypeScript<\/span>\n  <h1>TypeScript \ud1b5\ud569 \u2014 \ud0c0\uc785 \uc548\uc804 Next.js<\/h1>\n  <p>\ud55c \uc5b8\uc5b4\ub85c \ud480\uc2a4\ud0dd, \ud55c \ud0c0\uc785 \uc2dc\uc2a4\ud15c\uc73c\ub85c \ud480\uc2a4\ud0dd. Next + TS \uac00 \ub9cc\ub098\uba74 \uacb0\uc815\uc801 \uc2dc\ub108\uc9c0.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-92.jpg\" alt=\"TypeScript \uac00 \uc11c\ubc84\u00b7\ud074\ub77c\uc774\uc5b8\ud2b8 \uacbd\uacc4\ub97c \uac00\ub85c\uc9c0\ub974\ub294 \ucee8\uc149 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>1\ud3b8\uc5d0\uc11c &#8220;TypeScript \ubb34\uc870\uac74 Yes&#8221; \ub77c\uace0 \ub9d0\ud588\ub2e4. <code>create-next-app<\/code> \uc774 \uc790\ub3d9 \uc138\ud305\ud574\uc8fc\ub2c8 \uadf8 \uc790\uccb4\ub294 \uc190\ub3c4 \uc548 \ub304\ub2e4. \uadf8\ub7f0\ub370 <strong>Next.js \uc758 \uc9c4\uc9dc \ud0c0\uc785 \uc548\uc804<\/strong>\uc740 \uadf8\ubcf4\ub2e4 \ud55c \ub2e8\uacc4 \ub354 \u2014 Server Action \uc778\uc790 \ud0c0\uc785, Route Handler \uc751\ub2f5 \ud0c0\uc785, fetch \uacb0\uacfc \ud0c0\uc785\uae4c\uc9c0 \ud480\uc2a4\ud0dd \uc5f0\uacb0.<\/p>\n\n<p>\uc774\ubc88 \ud3b8\uc740 \uadf8 \ud55c \ub2e8\uacc4 \ub354 \u2014 <code>tsconfig<\/code> \uc124\uc815, Server\/Client \ucef4\ud3ec\ub10c\ud2b8 \ud0c0\uc785, \ud3fc\u00b7API \uc758 \ud0c0\uc785 \uacf5\uc720 \ud328\ud134.<\/p>\n\n<h2>1. tsconfig \uad8c\uc7a5 \uc635\uc158<\/h2>\n\n<p><code>create-next-app<\/code> \uae30\ubcf8 + \uad8c\uc7a5 \ucd94\uac00:<\/p>\n\n<div class=\"code-block\">\/\/ tsconfig.json\n{\n  &#8220;compilerOptions&#8221;: {\n    &#8220;target&#8221;: &#8220;ES2022&#8221;,\n    &#8220;lib&#8221;: [&#8220;dom&#8221;, &#8220;dom.iterable&#8221;, &#8220;esnext&#8221;],\n    &#8220;module&#8221;: &#8220;esnext&#8221;,\n    &#8220;moduleResolution&#8221;: &#8220;bundler&#8221;,\n    &#8220;jsx&#8221;: &#8220;preserve&#8221;,\n    &#8220;strict&#8221;: true,                  \/\/ \u2605 \ud544\uc218\n    &#8220;noUncheckedIndexedAccess&#8221;: true, \/\/ \u2605 \ucd94\ucc9c: arr[i] \uac00 T|undefined\n    &#8220;noUnusedLocals&#8221;: false,         \/\/ \uac1c\ubc1c \uc911 \ub9c8\ucc30 \uc904\uc774\ub824 false\n    &#8220;skipLibCheck&#8221;: true,\n    &#8220;esModuleInterop&#8221;: true,\n    &#8220;incremental&#8221;: true,\n    &#8220;plugins&#8221;: [{ &#8220;name&#8221;: &#8220;next&#8221; }],\n    &#8220;paths&#8221;: { &#8220;@\/*&#8221;: [&#8220;.\/*&#8221;] }\n  },\n  &#8220;include&#8221;: [&#8220;next-env.d.ts&#8221;, &#8220;**\/*.ts&#8221;, &#8220;**\/*.tsx&#8221;, &#8220;.next\/types\/**\/*.ts&#8221;],\n  &#8220;exclude&#8221;: [&#8220;node_modules&#8221;]\n}<\/div>\n\n<p>\ud575\uc2ec 2\uac1c \u2014 <code>strict: true<\/code> \uc640 <code>noUncheckedIndexedAccess: true<\/code>. \ub458 \ub2e4 \ucf1c\uc57c \ub7f0\ud0c0\uc784 \uc0ac\uace0\uac00 \ucef4\ud30c\uc77c \ud0c0\uc784\uc5d0 \uc7a1\ud78c\ub2e4.<\/p>\n\n<h2>2. Server Component \ud0c0\uc785 \u2014 params \uc640 searchParams<\/h2>\n\n<p>Next 15 \ubd80\ud130 \ub458 \ub2e4 Promise.<\/p>\n\n<div class=\"code-block\">\/\/ app\/blog\/[slug]\/page.tsx\ntype Props = {\n  params: Promise&lt;{ slug: string }&gt;;\n  searchParams: Promise&lt;{ [key: string]: string | string[] | undefined }&gt;;\n};\n\nexport default async function BlogPost({ params, searchParams }: Props) {\n  const { slug } = await params;\n  const { lang } = await searchParams;\n  \/\/ &#8230;\n}<\/div>\n\n<p><code>searchParams<\/code> \uc758 \uac12\uc774 <code>string | string[] | undefined<\/code> \uc778 \uac8c \ud5f7\uac08\ub9ac\uae30 \uc26c\uc6c0. URL \uc758 <code>?key=a&key=b<\/code> \uac00 \ubc30\uc5f4\ub85c \uc624\ub2c8\uae4c \ud56d\uc0c1 \ucc98\ub9ac \ubd84\uae30.<\/p>\n\n<h2>3. Server Action \ud0c0\uc785 \u2014 Zod \ub85c \uc591\ucabd \ubcf4\uc7a5<\/h2>\n\n<p>10\ud3b8 \ud3fc \ucc55\ud130\uc758 \ud328\ud134 \uc7ac\ubc29\ubb38 \u2014 TypeScript \uc640 Zod \uc758 \uc2dc\ub108\uc9c0.<\/p>\n\n<div class=\"code-block\">\/\/ actions.ts\n&#8216;use server&#8217;;\nimport { z } from &#8216;zod&#8217;;\n\nconst Schema = z.object({\n  title: z.string().min(2),\n  body:  z.string().min(10),\n  authorId: z.string().uuid(),\n});\n\ntype FormState = {\n  ok: boolean;\n  errors?: Record&lt;string, string[]&gt;;\n  data?: z.infer&lt;typeof Schema&gt;;\n};\n\nexport async function createPost(prev: FormState, fd: FormData): Promise&lt;FormState&gt; {\n  const parsed = Schema.safeParse(Object.fromEntries(fd));\n  if (!parsed.success) {\n    return { ok: false, errors: parsed.error.flatten().fieldErrors };\n  }\n  await db.posts.create({ data: parsed.data });\n  return { ok: true, data: parsed.data };\n}<\/div>\n\n<p><code>z.infer&lt;typeof Schema&gt;<\/code> \uac00 \ud575\uc2ec \u2014 \ub7f0\ud0c0\uc784 \uac80\uc99d \uc2a4\ud0a4\ub9c8\uc5d0\uc11c TypeScript \ud0c0\uc785\uc744 \uc790\ub3d9 \ucd94\ucd9c. <strong>\ud55c \uacf3 \uc815\uc758 \u2192 \uc591\ucabd \uc790\ub3d9<\/strong>. \uc61b \ubc29\uc2dd\uc758 type + \ub7f0\ud0c0\uc784 \uac80\uc99d \ub530\ub85c \uc801\ub358 \uc911\ubcf5\uc774 \uc0ac\ub77c\uc9c4\ub2e4.<\/p>\n\n<h2>4. Route Handler \uc751\ub2f5 \ud0c0\uc785 \u2014 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uacf5\uc720<\/h2>\n\n<p>API \uac00 \ubc18\ud658\ud558\ub294 \ubaa8\uc591\uc744 \uc5b4\ub514\uc11c \uc815\uc758\ud560\uc9c0 \u2014 \ub2f5\uc740 <code>lib\/api-types.ts<\/code> \uac19\uc740 \uacf5\uc720 \ud30c\uc77c.<\/p>\n\n<div class=\"code-block\">\/\/ lib\/api-types.ts\nimport { z } from &#8216;zod&#8217;;\n\nexport const PostSchema = z.object({\n  id: z.string().uuid(),\n  title: z.string(),\n  body: z.string(),\n  createdAt: z.string().datetime(),\n});\n\nexport type Post = z.infer&lt;typeof PostSchema&gt;;\nexport const PostListResponse = z.object({\n  data: z.array(PostSchema),\n  total: z.number(),\n});\nexport type PostListResponse = z.infer&lt;typeof PostListResponse&gt;;\n\n\/\/ app\/api\/posts\/route.ts\nexport async function GET(): Promise&lt;Response&gt; {\n  const posts = await db.posts.findMany();\n  const body: PostListResponse = { data: posts, total: posts.length };\n  return Response.json(body);\n}\n\n\/\/ \ud074\ub77c\uc774\uc5b8\ud2b8\nimport { PostListResponse } from &#8216;@\/lib\/api-types&#8217;;\nconst res = await fetch(&#8216;\/api\/posts&#8217;);\nconst json: PostListResponse = await res.json();<\/div>\n\n<div class=\"warnbox\">\n<strong>\uc8fc\uc758 \u2014 \uc11c\ubc84\uc5d0\uc11c \ubcf4\ub0b8 \ud0c0\uc785\uc774 \uc790\ub3d9 \uc548\uc804\ud558\uc9c0 \uc54a\uc74c<\/strong> \u2014 \uc704 <code>json: PostListResponse<\/code> \ub294 \ub2e8\uc21c \uce90\uc2a4\ud305. \uc2e4\uc81c \uc751\ub2f5\uc774 \ub2e4\ub97c \uc218 \uc788\ub2e4. \uc9c4\uc9dc \uc548\uc804\ud558\ub824\uba74 <strong>\ud074\ub77c\uc774\uc5b8\ud2b8\ub3c4 Zod \ub85c \ub2e4\uc2dc parse<\/strong>. \ub610\ub294 \ub2e4\uc74c \uc808\uc758 tRPC \ub3c4\uc785.\n<\/div>\n\n<h2>5. tRPC \u2014 \uc9c4\uc9dc \ud0c0\uc785 \uc548\uc804 \ud480\uc2a4\ud0dd<\/h2>\n\n<p>Next + TS \uc758 \uc815\uc810. \uc11c\ubc84 \ud568\uc218 \uc2dc\uadf8\ub2c8\ucc98\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \uc790\ub3d9 \uc804\ud30c, \ubcc4\ub3c4 fetch\u00b7\ud0c0\uc785 \ub3d9\uae30\ud654 \ucf54\ub4dc 0.<\/p>\n\n<div class=\"code-block\">\/\/ server\/routers\/posts.ts\nimport { router, publicProcedure } from &#8216;@\/server\/trpc&#8217;;\nimport { z } from &#8216;zod&#8217;;\n\nexport const postsRouter = router({\n  list: publicProcedure\n    .input(z.object({ page: z.number().default(1) }))\n    .query(async ({ input }) =&gt; {\n      return db.posts.findMany({ skip: (input.page &#8211; 1) * 20, take: 20 });\n    }),\n  create: publicProcedure\n    .input(z.object({ title: z.string().min(2), body: z.string() }))\n    .mutation(async ({ input }) =&gt; db.posts.create({ data: input })),\n});\n\n\/\/ \ud074\ub77c\uc774\uc5b8\ud2b8\n&#8216;use client&#8217;;\nimport { trpc } from &#8216;@\/lib\/trpc&#8217;;\n\nconst { data } = trpc.posts.list.useQuery({ page: 1 });\n\/\/ data \uc758 \ud0c0\uc785\uc774 \uc790\ub3d9\uc73c\ub85c Post[] \u2014 fetch\u00b7\ud0c0\uc785 \uc815\uc758\u00b7\uac80\uc99d \ucf54\ub4dc 0\uc904<\/div>\n\n<p>fetch \uc758 url\u00b7\uba54\uc11c\ub4dc\u00b7body \uc9c1\ub82c\ud654\u00b7\uc5ed\uc9c1\ub82c\ud654\u00b7\ud0c0\uc785 \ub3d9\uae30\ud654 \u2014 \ub2e4 \uc0ac\ub77c\uc9c4\ub2e4. <strong>\ub9ac\ud329\ud1a0\ub9c1\uc774 \uc591\ubc29\ud5a5<\/strong> \u2014 \uc11c\ubc84\uc5d0\uc11c \ud544\ub4dc \ud558\ub098 \ube7c\uba74 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc804\ubd80 \ube68\uac04 \uc904.<\/p>\n\n<div class=\"databox\">\n<strong>\ub300\uc548 \u2014 Server Actions \ub9cc\uc73c\ub85c \ucda9\ubd84<\/strong> \u2014 \uac19\uc740 \uc0ac\uc774\ud2b8 \uc548 \ud3fc\u00b7\ubc84\ud2bc\uc774\uba74 9\u00b710\ud3b8\uc758 Server Action \uc73c\ub85c \ud0c0\uc785 \uc548\uc804 \uac00\ub2a5. <strong>tRPC \ub294 \uc678\ubd80\uc5d0\uc11c API \ud638\ucd9c\ud558\uac70\ub098 \ubaa8\ubc14\uc77c \uc571\uc774 \uc788\uc744 \ub54c \uac15\ub825<\/strong>. \uc791\uc740 \uc0ac\uc774\ub4dc \ud504\ub85c\uc81d\ud2b8\ub294 Server Action + fetch + Zod \ub85c\ub3c4 \ucda9\ubd84. \ud68c\uc0ac \ucf54\ub4dc\uc5d0\uc11c \uc790\uc8fc \ub9cc\ub09c\ub2e4.\n<\/div>\n\n<h3>\uc694\uc57d \u2014 24\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. <code>tsconfig<\/code> \uc758 <strong><code>strict<\/code><\/strong> \uc640 <strong><code>noUncheckedIndexedAccess<\/code><\/strong> \ub458 \ub2e4 \ucf1c\uae30. Server Component \uc758 <code>params<\/code>\u00b7<code>searchParams<\/code> \ub294 Promise (Next 15). <strong>Zod + <code>z.infer<\/code><\/strong> \ub85c \ub7f0\ud0c0\uc784\u00b7\ucef4\ud30c\uc77c \ud0c0\uc785 \ud55c \uacf3 \uc815\uc758. Route Handler \uc751\ub2f5\uc740 \uacf5\uc720 \ud0c0\uc785 \ud30c\uc77c, \uc9c4\uc9dc \uc548\uc804\uc740 \ud074\ub77c\uc5d0\uc11c\ub3c4 Zod parse. \ud480\uc2a4\ud0dd \uc790\ub3d9 \ud0c0\uc785\uc740 <strong>tRPC<\/strong>. \ub2e4\uc74c \ud3b8\uc5d0\uc11c <strong>\uc131\ub2a5 \uce21\uc815\u00b7\ucd5c\uc801\ud654<\/strong>.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 \uc131\ub2a5 \uce21\uc815\uacfc \ucd5c\uc801\ud654<\/h3>\n<p>Lighthouse\u00b7Web Vitals\u00b7\ubc88\ub4e4 \ubd84\uc11d. 25\ud3b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\n\uc2dc\ub9ac\uc988 \u00b7 <a href=\"https:\/\/junai.ai\/blog\/category\/nextjs\/\">\uc27d\uac8c \ubc30\uc6b0\ub294 Next.js<\/a> \u00b7 \uc774\uc804: <a href=\"https:\/\/junai.ai\/blog\/nextjs-pages-to-app-migration-23\/\">Ch.23 \ub9c8\uc774\uadf8\ub808\uc774\uc158<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Next.js + TypeScript \ud480\uc2a4\ud0dd \ud0c0\uc785 \uc548\uc804 \u2014 tsconfig\u00b7Server\/Client \ud0c0\uc785\u00b7Zod \uac80\uc99d\u00b7tRPC \ud0c0\uc785 \uacf5\uc720. \uad50\uc7ac 24\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":861,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=915"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/861"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}