{"id":84093,"date":"2025-01-17T18:27:43","date_gmt":"2025-01-17T11:27:43","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=84093"},"modified":"2025-01-17T18:27:43","modified_gmt":"2025-01-17T11:27:43","slug":"phat-trien-du-an-nextjs-typescript","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/","title":{"rendered":"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#NextJS_la_gi_TypeScript_la_gi\" >NextJS l\u00e0 g\u00ec? TypeScript l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#Cach_them_TypeScript_vao_ung_dung_Nextjs\" >C\u00e1ch th\u00eam TypeScript v\u00e0o \u1ee9ng d\u1ee5ng Nextjs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#Cach_su_dung_TypeScript_trong_phuong_thuc_truy_xuat_du_lieu_data_fetching_methods\" >C\u00e1ch s\u1eed d\u1ee5ng TypeScript trong ph\u01b0\u01a1ng th\u1ee9c truy xu\u1ea5t d\u1eef li\u1ec7u (data fetching methods)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#Cach_su_dung_TypeScript_trong_Nextjs_API\" >C\u00e1ch s\u1eed d\u1ee5ng TypeScript trong Nextjs API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#Cach_go_loi_trong_ung_dung_NextJS_va_TypeScript\" >C\u00e1ch g\u1ee1 l\u1ed7i trong \u1ee9ng d\u1ee5ng NextJS v\u00e0 TypeScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#Cau_hoi_thuong_gap_ve_NextJS_TypeScript\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 NextJS TypeScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#Tong_ket_ve_NextJS_TypeScript\" >T\u1ed5ng k\u1ebft v\u1ec1 NextJS TypeScript<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Next.js l\u00e0 m\u1ed9t framework web React, trong khi TypeScript l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u1edf r\u1ed9ng c\u1ee7a JavaScript. K\u1ebft h\u1ee3p gi\u1eefa NextJS TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng nhanh ch\u00f3ng m\u00e0 c\u00f2n \u0111\u1ea3m b\u1ea3o m\u00e3 ngu\u1ed3n an to\u00e0n v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u1ed5ng quan v\u1ec1 Nextjs v\u00e0 TypeScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch s\u1eed d\u1ee5ng TypeScript trong d\u1ef1 \u00e1n Nextjs API<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch g\u1ee1 l\u1ed7i \u1ee9ng d\u1ee5ng Nextjs v\u00e0 TypeScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Nextjs<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"NextJS_la_gi_TypeScript_la_gi\"><\/span><b>NextJS l\u00e0 g\u00ec? TypeScript l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><strong>NextJS<\/strong> l\u00e0 m\u1ed9t framework ph\u1ed5 bi\u1ebfn d\u1ef1a tr\u00ean React gi\u00fap x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng web d\u1ec5 d\u00e0ng. N\u00f3 cung c\u1ea5p nhi\u1ec1u t\u00ednh n\u0103ng h\u1eefu \u00edch nh\u01b0 k\u1ebft xu\u1ea5t ph\u00eda m\u00e1y ch\u1ee7 (Server-side Rendering), Static Site Generation, App Router v\u00e0 Page Router, Zero-config bundling v\u00e0 code splitting, T\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh v\u00e0 font t\u1ef1 \u0111\u1ed9ng, API Routes t\u00edch h\u1ee3p s\u1eb5n.\u00a0<\/span><\/p>\n<p><strong><a href=\"https:\/\/itviec.com\/blog\/typescript-la-gi\/\" target=\"_blank\" rel=\"noopener\">TypeScript<\/a><\/strong><span style=\"font-weight: 400;\"> l\u00e0 si\u00eau t\u1eadp <\/span><a href=\"https:\/\/itviec.com\/blog\/typescript-la-gi\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">JavaScript<\/span><\/a><span style=\"font-weight: 400;\"> ki\u1ec3u t\u0129nh mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch cho ph\u00e1t tri\u1ec3n web, ch\u1eb3ng h\u1ea1n nh\u01b0 ch\u1ea5t l\u01b0\u1ee3ng m\u00e3 \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n, t\u1ed5 ch\u1ee9c m\u00e3 t\u1ed1t v\u00e0 ph\u00e1t hi\u1ec7n l\u1ed7i s\u1edbm h\u01a1n. TypeScript l\u00e0 l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn c\u1ee7a nhi\u1ec1u l\u1eadp tr\u00ecnh vi\u00ean v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i trong c\u1ed9ng \u0111\u1ed3ng React.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng TypeScript trong Nextjs:<\/span><\/p>\n<ul>\n<li><b>Ch\u1ea5t l\u01b0\u1ee3ng m\u00e3 t\u1ed1t h\u01a1n: <\/b><span style=\"font-weight: 400;\">TypeScript cung c\u1ea5p ki\u1ec3u m\u00e3 t\u0129nh gi\u00fap ph\u00e1t hi\u1ec7n l\u1ed7i t\u1ea1i th\u1eddi \u0111i\u1ec3m bi\u00ean d\u1ecbch m\u00e3. \u0110i\u1ec1u n\u00e0y gi\u00fap vi\u1ebft m\u00e3 kh\u00f4ng c\u00f3 l\u1ed7i v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n.\u00a0<\/span><\/li>\n<li><b>C\u1ea3i thi\u1ec7n t\u1ed5 ch\u1ee9c m\u00e3:<\/b><span style=\"font-weight: 400;\"> TypeScript cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh giao di\u1ec7n v\u00e0 type, gi\u00fap d\u1ec5 d\u00e0ng suy lu\u1eadn v\u1ec1 m\u00e3 v\u00e0 gi\u1ea3m nguy c\u01a1 x\u1ea3y ra c\u00e1c t\u00ecnh tr\u1ea1ng kh\u00f4ng mong mu\u1ed1n.<\/span><\/li>\n<li><b>Ph\u00e1t hi\u1ec7n l\u1ed7i s\u1edbm:<\/b><span style=\"font-weight: 400;\"> TypeScript cung c\u1ea5p h\u1ed7 tr\u1ee3 tr\u00ecnh ch\u1ec9nh s\u1eeda phong ph\u00fa, bao g\u1ed3m ho\u00e0n th\u00e0nh m\u00e3, t\u00f4 s\u00e1ng l\u1ed7i,&#8230; gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n l\u1ed7i s\u1edbm trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n m\u00e3.\u00a0<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cach_them_TypeScript_vao_ung_dung_Nextjs\"><\/span><b>C\u00e1ch th\u00eam TypeScript v\u00e0o \u1ee9ng d\u1ee5ng Nextjs<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Nextjs cung c\u1ea5p h\u1ed7 tr\u1ee3 t\u00edch h\u1ee3p cho TypeScript v\u1edbi c\u00e1c ki\u1ec3u t\u00edch h\u1ee3p cho trang, API ho\u1eb7c ph\u01b0\u01a1ng th\u1ee9c truy xu\u1ea5t d\u1eef li\u1ec7u,&#8230; B\u1ea1n c\u00f3 th\u1ec3 th\u00eam TypeScript v\u00e0o d\u1ef1 \u00e1n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <\/span><span style=\"font-weight: 400;\">create-next-app<\/span><span style=\"font-weight: 400;\"> ho\u1eb7c th\u00eam th\u1ee7 c\u00f4ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu th\u00eam TypeScript b\u1eb1ng <\/span><span style=\"font-weight: 400;\">create-next-app<\/span><span style=\"font-weight: 400;\">, b\u1ea1n kh\u1edfi \u0111\u1ed9ng \u1ee9ng d\u1ee5ng Nextjs b\u1eb1ng TypeScript sau \u0111\u00f3 th\u00eam \u0111o\u1ea1n m\u00e3 <\/span><span style=\"font-weight: 400;\">&#8211;typescrip<\/span><span style=\"font-weight: 400;\">t ho\u1eb7c <\/span><span style=\"font-weight: 400;\">&#8211;ts<\/span><span style=\"font-weight: 400;\"> v\u00e0o l\u1ec7nh <\/span><span style=\"font-weight: 400;\">create-next-app<\/span><span style=\"font-weight: 400;\">. C\u1ee5 th\u1ec3:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npx create-next-app@latest --ts<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">ho\u1eb7c<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npx create-next-app@latest --typescript<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam TypeScript theo c\u00e1ch th\u1ee7 c\u00f4ng b\u1eb1ng c\u00e1ch t\u1ea1o m\u1ed9t t\u1ec7p <\/span><span style=\"font-weight: 400;\">tsconfig.json<\/span><span style=\"font-weight: 400;\"> trong th\u01b0 m\u1ee5c g\u1ed1c. File n\u00e0y s\u1ebd ch\u1ec9 \u0111\u1ecbnh c\u00e1c file g\u1ed1c v\u00e0 c\u00e1c t\u00f9y ch\u1ecdn tr\u00ecnh bi\u00ean d\u1ecbch c\u1ea7n thi\u1ebft \u0111\u1ec3 bi\u00ean d\u1ecbch d\u1ef1 \u00e1n. \u0110\u1ed3ng th\u1eddi \u0111\u01b0\u1ee3c Nextjs t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n c\u00e1c gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">touch tsconfig.json<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ti\u1ebfp theo, b\u1ea1n ch\u1ea1y<\/span><span style=\"font-weight: 400;\"> npm run dev<\/span><span style=\"font-weight: 400;\"> ho\u1eb7c<\/span><span style=\"font-weight: 400;\"> yarn dev<\/span><span style=\"font-weight: 400;\"> (n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng Yarn) \u0111\u1ec3 kh\u1edfi \u0111\u1ed9ng m\u00e1y ch\u1ee7. L\u00fac n\u00e0y, Nextjs s\u1ebd ph\u00e1t ra m\u1ed9t th\u00f4ng b\u00e1o trong terminal v\u00e0 th\u1eed c\u00e0i \u0111\u1eb7t c\u00e1c g\u00f3i li\u00ean quan \u0111\u1ebfn TypeScript.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Khi qu\u00e1 tr\u00ecnh c\u00e0i \u0111\u1eb7t k\u1ebft th\u00fac, b\u1ea1n m\u1edf <\/span><span style=\"font-weight: 400;\">tsconfig.json<\/span><span style=\"font-weight: 400;\"> v\u00e0 s\u1ebd th\u1ea5y \u0111\u01b0\u1ee3c c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-84177\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro.jpg\" alt=\"nextjs typescript - itviec blog\" width=\"1520\" height=\"1186\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro.jpg 1520w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro-300x234.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro-640x499.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro-200x156.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro-768x599.jpg 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro-100x78.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/nextjs-typescript-1-vippro-577x450.jpg 577w\" sizes=\"auto, (max-width: 1520px) 100vw, 1520px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">\u0110o\u1ea1n m\u00e3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb khi th\u00eam TypeScript v\u00e0o Nextjs b\u1eb1ng c\u00e1ch th\u1ee7 c\u00f4ng (Ngu\u1ed3n: refine.dev)<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, Nextjs c\u0169ng t\u1ea1o m\u1ed9t file m\u1edbi v\u1edbi next-env.d.ts trong th\u01b0 m\u1ee5c g\u1ed1c c\u1ee7a d\u1ef1 \u00e1n. File n\u00e0y s\u1ebd \u0111\u1ea3m b\u1ea3o c\u00e1c ki\u1ec3u Nextjs \u0111\u01b0\u1ee3c tr\u00ecnh bi\u00ean d\u1ecbch ch\u1ecdn v\u00e0 kh\u00f4ng n\u00ean ch\u1ec9nh s\u1eeda ho\u1eb7c x\u00f3a.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sau khi \u0111\u00e3 c\u00e0i \u0111\u1eb7t TypeScript v\u00e0o Nextjs, b\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u t\u1ea1o c\u00e1c file c\u00f3 ph\u1ea7n m\u1edf r\u1ed9ng l\u00e0 .ts v\u00e0 .tsx trong \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. C\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i c\u00e1c file .js th\u00e0nh .ts v\u00e0 .jsx th\u00e0nh .tsx<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cach_su_dung_TypeScript_trong_phuong_thuc_truy_xuat_du_lieu_data_fetching_methods\"><\/span><b>C\u00e1ch s\u1eed d\u1ee5ng TypeScript trong ph\u01b0\u01a1ng th\u1ee9c truy xu\u1ea5t d\u1eef li\u1ec7u (data fetching methods)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Next.js cung c\u1ea5p hai c\u00e1ch ti\u1ebfp c\u1eadn cho vi\u1ec7c truy xu\u1ea5t d\u1eef li\u1ec7u: Pages Router (truy\u1ec1n th\u1ed1ng) v\u00e0 App Router (modern). D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch s\u1eed d\u1ee5ng TypeScript cho c\u1ea3 hai ph\u01b0\u01a1ng ph\u00e1p:<\/span><\/p>\n<h3><b>Pages Router (Truy\u1ec1n th\u1ed1ng)<\/b><\/h3>\n<pre><span style=\"font-weight: 400;\">import { GetStaticProps, GetStaticPaths, GetServerSideProps } from \"next\";<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export const getStaticProps: GetStaticProps = async (context) =&gt; {};<\/span>\r\n<span style=\"font-weight: 400;\">export const getStaticPaths: GetStaticPaths = async () =&gt; {};<\/span>\r\n<span style=\"font-weight: 400;\">export const getServerSideProps: GetServerSideProps = async (context) =&gt; {};<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Nextjs c\u0169ng cung c\u1ea5p c\u00e1c ki\u1ec3u t\u00edch h\u1ee3p \u0111\u1ec3 suy ra c\u00e1c ki\u1ec3u (type) cho props t\u1eeb getServerSideProps v\u00e0 getStaticProps. N\u1ebfu b\u1ea1n mu\u1ed1n c\u00f3 c\u00e1c type suy ra cho props c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1ec7nh sau tr\u00ean m\u1ed9t th\u00e0nh ph\u1ea7n trang.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">InferGetStaticPropsType&lt;typeof getStaticProps&gt;\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\/\/ ho\u1eb7c\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">InferGetServerSidePropsType&lt;typeof getServerSideProps&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1edbi Pages Router:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">type PostProps = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0userId: number,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0id: number,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0title: string,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0body: string<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export const getStaticProps: GetStaticProps&lt;{posts: PostProps[]}&gt; = async () =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0const posts = await response.json();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0props: {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0posts,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0revalidate: 60 \/\/ [UPDATED] Th\u00eam ISR option<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/\/ C\u00e1ch 1: \u0110\u1ecbnh ngh\u0129a type tr\u1ef1c ti\u1ebfp<\/span>\r\n<span style=\"font-weight: 400;\">function PostPage({ posts }: { posts: PostProps[] }) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/\/ ...<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/\/ C\u00e1ch 2: S\u1eed d\u1ee5ng InferGetStaticPropsType<\/span>\r\n<span style=\"font-weight: 400;\">import { InferGetStaticPropsType } from 'next'<\/span>\r\n<span style=\"font-weight: 400;\">function PostPage({ posts }: InferGetStaticPropsType&lt;typeof getStaticProps&gt;) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/\/ ...<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default PostPage<\/span><\/pre>\n<h3><b>App Router (Next.js 13+)<\/b><\/h3>\n<pre><span style=\"font-weight: 400;\">\/\/ app\/posts\/page.tsx<\/span>\r\n<span style=\"font-weight: 400;\">async function getPosts(): Promise&lt;PostProps[]&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0const res = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts')<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0if (!res.ok) throw new Error('Failed to fetch posts')<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return res.json()<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default async function PostsPage() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0const posts = await getPosts()<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return (<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{posts.map(post =&gt; (<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div key={post.id}&gt;{post.title}&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0)<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0Nh\u1eefng l\u01b0u \u00fd quan tr\u1ecdng:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App Router kh\u00f4ng c\u1ea7n getStaticProps\/getServerSideProps<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fetch requests \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng dedupe v\u00e0 cache<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Server Components c\u00f3 h\u1ed7 tr\u1ee3 TypeScript t\u1ed1t h\u01a1n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng async\/await tr\u1ef1c ti\u1ebfp trong components<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">TypeScript t\u1ef1 \u0111\u1ed9ng suy lu\u1eadn types cho data fetching<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cach_su_dung_TypeScript_trong_Nextjs_API\"><\/span><b> C\u00e1ch s\u1eed d\u1ee5ng TypeScript trong Nextjs API<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Next.js cung c\u1ea5p hai c\u00e1ch \u0111\u1ec3 x\u00e2y d\u1ef1ng API endpoints v\u1edbi TypeScript:<\/span><\/p>\n<h3><b>Pages Router API (pages\/api)<\/b><\/h3>\n<pre><span style=\"font-weight: 400;\">import type { NextApiRequest, NextApiResponse } from \"next\"<\/span>\r\n\r\n<span style=\"font-weight: 400;\">type Data = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: number \/\/ [UPDATED] Th\u00eam type ch\u00ednh x\u00e1c<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default function handler(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0req: NextApiRequest,\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0res: NextApiResponse&lt;Data&gt;<\/span>\r\n<span style=\"font-weight: 400;\">) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0if (req.method === 'GET') { \/\/ [UPDATED] Th\u00eam method check<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0res.status(200).json({ name: \"John\", age: 25 })<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b>App Router API (app\/api)<\/b><\/h3>\n<pre><span style=\"font-weight: 400;\">import { NextRequest, NextResponse } from 'next\/server'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">type Data = {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0name: string<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0age: number<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export async function GET(request: NextRequest) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0return NextResponse.json&lt;Data&gt;({ name: \"John\", age: 25 })<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Cach_go_loi_trong_ung_dung_NextJS_va_TypeScript\"><\/span><b> C\u00e1ch g\u1ee1 l\u1ed7i trong \u1ee9ng d\u1ee5ng NextJS v\u00e0 TypeScript<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Debug trong \u1ee9ng d\u1ee5ng Nextjs v\u00e0 TypeScript c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t th\u00e1ch th\u1ee9c, nh\u01b0ng v\u1edbi nhi\u1ec1u c\u00f4ng c\u1ee5 v\u00e0 k\u1ef9 thu\u1eadt c\u00f3 s\u1eb5n s\u1ebd gi\u00fap b\u1ea1n th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y d\u1ec5 d\u00e0ng h\u01a1n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 debug, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o qua m\u1ed9t s\u1ed1 m\u1eb9o nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u1eed d\u1ee5ng tr\u00ecnh g\u1ee1 l\u1ed7i:<\/b><span style=\"font-weight: 400;\"> Hi\u1ec7u qu\u1ea3 h\u01a1n so v\u1edbi vi\u1ec7c s\u1eed d\u1ee5ng c\u00e2u l\u1ec7nh console.log trong VSCode hay c\u00e1c IDE kh\u00e1c c\u00f3 t\u00edch h\u1ee3p c\u00f4ng c\u1ee5 g\u1ee1 l\u1ed7i t\u01b0\u01a1ng th\u00edch v\u1edbi Nextjs v\u00e0 TypeScript.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1eadt b\u1ea3n \u0111\u1ed3 ngu\u1ed3n (sources map):<\/b><span style=\"font-weight: 400;\"> Cho ph\u00e9p b\u1ea1n \u00e1nh x\u1ea1 m\u00e3 TypeScript \u0111\u1ec3 bi\u00ean d\u1ecbch v\u00e0o file g\u1ed1c, gi\u00fap debug d\u1ec5 d\u00e0ng h\u01a1n. Nextjs t\u1ea1o b\u1ea3n \u0111\u1ed3 ngu\u1ed3n theo m\u1eb7c \u0111\u1ecbnh, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n \u0111\u1ecbnh c\u1ea5u h\u00ecnh IDE \u0111\u1ec3 s\u1eed d\u1ee5ng ch\u00fang.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ki\u1ec3m tra c\u1ea5u h\u00ecnh TypeScript:<\/b><span style=\"font-weight: 400;\"> \u0110\u1ea3m b\u1ea3o c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c v\u00e0 \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt.N\u1ebfu c\u00f3 l\u1ed7i trong c\u1ea5u h\u00ecnh c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn vi\u1ec7c ng\u0103n ch\u1eb7n qu\u00e1 tr\u00ecnh bi\u00ean d\u1ecbch m\u00e3.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u1eed d\u1ee5ng \u2013inspect: <\/b><span style=\"font-weight: 400;\">Cho ph\u00e9p b\u1ea1n \u0111\u00ednh k\u00e8m tr\u00ecnh g\u1ee1 l\u1ed7i v\u00e0o quy tr\u00ecnh <\/span><strong><a href=\"https:\/\/itviec.com\/blog\/nodejs-la-gi\/\" target=\"_blank\" rel=\"noopener\">NodeJS<\/a><\/strong><span style=\"font-weight: 400;\">\u00a0\u0111ang ch\u1ea1y. \u0110i\u1ec1u n\u00e0y s\u1ebd h\u1eefu \u00edch khi debug m\u00e3 \u1edf ph\u00eda m\u00e1y ch\u1ee7 trong Nextjs.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_NextJS_TypeScript\"><\/span><b> C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 NextJS TypeScript<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Nextjs m\u00e0 kh\u00f4ng c\u1ea7n TypeScript kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e2u tr\u1ea3 l\u1eddi l\u00e0 c\u00f3, Next.js c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng m\u00e0 kh\u00f4ng c\u1ea7n TypeScript. Tuy nhi\u00ean, s\u1eed d\u1ee5ng TypeScript c\u00f3 th\u1ec3 \u0111em l\u1ea1i tr\u1ea3i nghi\u1ec7m t\u1ed1t h\u01a1n cho nh\u00e0 ph\u00e1t tri\u1ec3n v\u00e0 m\u00e3 m\u1ea1nh m\u1ebd h\u01a1n.<\/span><\/p>\n<h3><b>C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng d\u00f9ng Nextjs v\u1edbi JavaScript thay v\u00ec TypeScript kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e2u tr\u1ea3 l\u1eddi l\u00e0 c\u00f3. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Nextjs v\u1edbi JavaScript thay v\u00ec TypeScript. B\u1edfi v\u00ec Nextjs c\u00f3 h\u1ed7 tr\u1ee3 c\u1ea3 JavaScript v\u00e0 TypeScript trong qu\u00e1 tr\u00ecnh l\u00e0m vi\u1ec7c.\u00a0<\/span><\/p>\n<h3><b>Nextjs TypeScript nh\u01b0 th\u1ebf n\u00e0o so v\u1edbi c\u00e1c framework kh\u00e1c?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Next.js TypeScript l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p m\u1ea1nh m\u1ebd gi\u1eefa framework v\u00e0 ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh. C\u00e1c l\u1ee3i \u00edch nh\u01b0 kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng, n\u0103ng su\u1ea5t v\u00e0 kh\u1ea3 n\u0103ng b\u1ea3o tr\u00ec khi\u1ebfn ch\u00fang tr\u1edf th\u00e0nh c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd cho vi\u1ec7c x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng web quy m\u00f4 l\u1edbn.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_NextJS_TypeScript\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 NextJS TypeScript<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Nh\u01b0 v\u1eady, ITviec Blog \u0111\u00e3 gi\u1ea3i \u0111\u00e1p chi ti\u1ebft v\u1ec1 c\u00e1ch b\u1eaft \u0111\u1ea7u k\u1ebft h\u1ee3p TypeScript trong c\u00e1c \u1ee9ng d\u1ee5ng Next.js. B\u00ean c\u1ea1nh \u0111\u00f3, t\u1ea7m quan tr\u1ecdng v\u00e0 l\u1ee3i \u00edch li\u00ean quan \u0111\u1ebfn vi\u1ec7c k\u1ebft h\u1ee3p c\u00e1c kh\u1ea3 n\u0103ng c\u1ee7a <\/span><b>Nextjs TypeScript<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 \u0111em l\u1ea1i tr\u1ea3i nghi\u1ec7m ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng nhanh h\u01a1n. Hy v\u1ecdng b\u00e0i vi\u1ebft n\u00e0y gi\u00fap b\u1ea1n c\u00e2n nh\u1eafc c\u0169ng nh\u01b0 c\u00f3 \u0111\u01b0\u1ee3c quy\u1ebft \u0111\u1ecbnh th\u00edch h\u1ee3p khi l\u1ef1a ch\u1ecdn TypeScript v\u00e0 Next.js v\u00e0o c\u00e1c \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js l\u00e0 m\u1ed9t framework web React, trong khi TypeScript l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u1edf r\u1ed9ng c\u1ee7a JavaScript. K\u1ebft h\u1ee3p gi\u1eefa NextJS TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng nhanh ch\u00f3ng m\u00e0 c\u00f2n \u0111\u1ea3m b\u1ea3o m\u00e3 ngu\u1ed3n an to\u00e0n v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec. \u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1: [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":84178,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-84093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript - ITviec Blog<\/title>\n<meta name=\"description\" content=\"K\u1ebft h\u1ee3p gi\u1eefa NextJS - framework web React, v\u00e0 TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng nhanh m\u00e0 c\u00f2n \u0111\u1ea3m b\u1ea3o m\u00e3 ngu\u1ed3n an to\u00e0n v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript\" \/>\n<meta property=\"og:description\" content=\"Next.js l\u00e0 m\u1ed9t framework web React, trong khi TypeScript l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u1edf r\u1ed9ng c\u1ee7a JavaScript. K\u1ebft h\u1ee3p gi\u1eefa NextJS TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-17T11:27:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/NextJS-TypeScript-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript - ITviec Blog","description":"K\u1ebft h\u1ee3p gi\u1eefa NextJS - framework web React, v\u00e0 TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng nhanh m\u00e0 c\u00f2n \u0111\u1ea3m b\u1ea3o m\u00e3 ngu\u1ed3n an to\u00e0n v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/","og_locale":"vi_VN","og_type":"article","og_title":"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript","og_description":"Next.js l\u00e0 m\u1ed9t framework web React, trong khi TypeScript l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u1edf r\u1ed9ng c\u1ee7a JavaScript. K\u1ebft h\u1ee3p gi\u1eefa NextJS TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y","og_url":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-01-17T11:27:43+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/NextJS-TypeScript-vippro.jpg","type":"image\/jpeg"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript","datePublished":"2025-01-17T11:27:43+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/"},"wordCount":1813,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/NextJS-TypeScript-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/","url":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/","name":"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/NextJS-TypeScript-vippro.jpg","datePublished":"2025-01-17T11:27:43+00:00","description":"K\u1ebft h\u1ee3p gi\u1eefa NextJS - framework web React, v\u00e0 TypeScript kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng nhanh m\u00e0 c\u00f2n \u0111\u1ea3m b\u1ea3o m\u00e3 ngu\u1ed3n an to\u00e0n v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/NextJS-TypeScript-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/01\/NextJS-TypeScript-vippro.jpg","width":1500,"height":790,"caption":"NextJS TypeScript - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/phat-trien-du-an-nextjs-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"NextJS TypeScript: C\u00e1ch t\u1ea1o d\u1ef1 \u00e1n NextJS v\u1edbi TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/84093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=84093"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/84093\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/84178"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=84093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=84093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=84093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}