{"id":3068,"date":"2023-02-20T17:22:42","date_gmt":"2023-02-20T10:22:42","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=3068"},"modified":"2023-04-03T14:07:59","modified_gmt":"2023-04-03T07:07:59","slug":"build-blog-don-gian-nextjs-phan-3","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/build-blog-don-gian-nextjs-phan-3.html","title":{"rendered":"BUILD BLOG \u0110\u01a0N GI\u1ea2N – NextJS Ph\u1ea7n 3"},"content":{"rendered":"

Tri\u1ec3n khai Blog \u0111\u01a1n gi\u1ea3n<\/h2>\n

\u0110\u1ea7u ti\u00ean m\u00ecnh xin gi\u1edbi thi\u1ec7u \u0111\u1ebfn c\u00e1c b\u1ea1n techtask m\u00e0 m\u00ecnh th\u01b0\u1eddng d\u00f9ng trong d\u1ef1 \u00e1n Nextjs: <\/span>Next.Js + Tailwind CSS + TypeScript + ESlint<\/b>. T\u00f9y v\u00e0o d\u1ef1 \u00e1n m\u1ed7i team th\u00ec c\u00e1c b\u1ea1n ch\u1ecdn c\u00f4ng ngh\u1ec7 ph\u00f9 h\u1ee3p nh\u00e9.<\/span><\/p>\n

B\u00e2y gi\u1edd m\u00ecnh s\u1ebd b\u1eaft \u0111\u1ea7u setup project Next JS:<\/span><\/h3>\n
    \n
  • T\u1ea1o project Next JS b\u1eb1ng l\u1ec7nh: <\/span>yarn create next-app –typescript blog-nextjs<\/span><\/i><\/li>\n<\/ul>\n

    Sau khi t\u1ea3i xong project b\u1ea1n d\u00f9ng l\u1ec7nh: <\/span>cd\u00a0 blog-nextjs<\/span><\/i> \u0111\u1ec3 v\u00e0o th\u01b0 m\u1ee5c project v\u00e0o run l\u1ec7nh start project: <\/span>yarn dev<\/span><\/i><\/p>\n

    \"Setup
    Setup project Next JS<\/figcaption><\/figure>\n
      \n
    • V\u1eady l\u00e0 ch\u00fang ta \u0111\u00e3 ch\u1ea1y \u0111\u01b0\u1ee3c project, ti\u1ebfp theo ch\u00fang ta s\u1ebd install Tailwind CSS v\u00e0o project b\u1eb1ng 2 c\u00e2u l\u1ec7nh sau:<\/span><\/li>\n<\/ul>\n

      npm install -D tailwindcss postcss autoprefixer<\/span><\/em><\/p>\n

      npx tailwindcss init -p<\/span><\/em><\/p>\n

        \n
      • Ch\u00fang ta s\u1ebd config cho c\u00e1c template s\u1eed d\u1ee5ng tailwindCSS nh\u01b0 sau nh\u00e9:<\/span><\/li>\n<\/ul>\n
        \"TailwindCSS\"
        TailwindCSS<\/figcaption><\/figure>\n

         <\/p>\n

        \"TailwindCSS
        TailwindCSS 2<\/figcaption><\/figure>\n

         <\/p>\n

          \n
        • B\u1ea1n t\u1eaft app v\u00e0 ch\u1ea1y l\u1ea1i l\u1ec7nh: yarn dev \u0111\u1ec3 build l\u1ea1i nh\u00e9. Sau \u0111\u00f3 th\u00eam v\u00e0o 1 class m\u00e0u background c\u1ee7a Tailwind CSS \u201cbg-gray-200\u201d \u0111\u1ec3 test xem \u0111\u00e3 effect ch\u01b0a nh\u00e9.<\/span><\/li>\n<\/ul>\n
          \"Tailwind
          Tailwind CSS \u201cbg-gray-200\u201d<\/figcaption><\/figure>\n

           <\/p>\n

            \n
          • V\u00e0 k\u1ebft qu\u1ea3 l\u00e0 background \u0111\u00e3 \u0111\u1ed5i m\u00e0u gray c\u1ee7a Tailwind CSS th\u00e0nh c\u00f4ng.<\/span><\/li>\n<\/ul>\n
            \"Tailwind
            Tailwind CSS th\u00e0nh c\u00f4ng<\/figcaption><\/figure>\n

             <\/p>\n

            M\u00ecnh s\u1ebd gi\u1ea3i th\u00edch c\u00e1c th\u01b0 m\u1ee5c c\u1ee7a project NextJS<\/span><\/h3>\n
            \"C\u00e1c
            C\u00e1c th\u01b0 m\u1ee5c c\u1ee7a project NextJS<\/figcaption><\/figure>\n
              \n
            • Components<\/b>: <\/b>Th\u01b0 m\u1ee5c ch\u1ee9a c\u00e1c component c\u1ea7n thi\u1ebft cho project (t\u1ef1 t\u1ea1o)<\/span><\/li>\n
            • Public<\/b>: Th\u01b0 m\u1ee5c ch\u1ee9a c\u00e1c t\u00e0i nguy\u00ean nh\u01b0 h\u00ecnh \u1ea3nh, files data,..<\/span><\/li>\n
            • Styles:<\/b> Th\u01b0 m\u1ee5c ch\u1ee9a c\u00e1c files css<\/span><\/li>\n
            • <\/b>Pages: <\/b>Ch\u1ee9a c\u00e1c page c\u1ee7a trang web, t\u00ean folder trong th\u01b0 m\u1ee5c pages s\u1ebd l\u00e0 route cho c\u00e1c page (VD: trong pages c\u1ee7a m\u00ecnh c\u00f3 th\u01b0 m\u1ee5c post v\u1eady th\u00ec m\u00ecnh s\u1ebd c\u00f3 link v\u00e0o c\u00e1c b\u00e0i post nh\u01b0 sau: <\/span>localhost:3001\/post\/1<\/span><\/i>\u00a0 \u201c1\u201d l\u00e0 s\u1ed1 id c\u1ee7a b\u1ea5t k\u1ef3 b\u00e0i post n\u00e0o.) V\u00e0 trong th\u01b0 m\u1ee5c pages c\u0169ng c\u00f3 s\u1eb5n th\u01b0 m\u1ee5c api: \u0111\u00e2y l\u00e0 ph\u1ea7n \u0111\u1ec3 vi\u1ebft API x\u1eed l\u00fd backend cho h\u1ec7 th\u1ed1ng.<\/span><\/li>\n<\/ul>\n

              B\u00e2y gi\u1edd ch\u00fang ta b\u1eaft \u0111\u1ea7u x\u00e2y giao di\u1ec7n cho blog \u0111\u01a1n gi\u1ea3n nh\u00e9:<\/h3>\n

              Public\/data\/posts.json<\/h4>\n
              [\r\n {\r\n   \"id\": 1,\r\n   \"title\": \"10 Extensions VS Code ng\u01b0\u1eddi m\u1edbi h\u1ecdc HTML&CSS c\u1ea7n ph\u1ea3i bi\u1ebft\",\r\n   \"content\": \"\u0110i\u1ec1u ch\u00ednh y\u1ebfu c\u1ee7a vi\u1ec7c h\u1ecdc l\u1eadp tr\u00ecnh \u0111\u00f3 ch\u00ednh l\u00e0 ki\u1ebfn th\u1ee9c v\u1ec1 c\u00e1c ng\u00f4n ng\u1eef, c\u00e1c c\u00f4ng ngh\u1ec7 m\u1edbi c\u00f3 trong m\u1ea3ng l\u1eadp tr\u00ecnh \u0111\u00f3.\\n\\nTuy nhi\u00ean sau nh\u1eefng kho\u1ea3ng th\u1eddi gian t\u00ecm hi\u1ec3u v\u1ec1 syntax, nh\u1eefng kh\u00e1i ni\u1ec7m l\u1eadp tr\u00ecnh n\u1eb7ng \u0111\u00f4, nh\u1eefng b\u00e0i thu\u1eadt to\u00e1n \\\"n\u1ed5 n\u00e3o\\\" th\u00ec b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 cho ph\u00e9p b\u1ea3n th\u00e2n m\u00ecnh gi\u1ea3i lao m\u1ed9t ch\u00fat v\u1edbi nh\u1eefng th\u1ee9 nh\u1eb9 nh\u00e0ng h\u01a1n nh\u00e9!\\n\\n\u0110i\u1ec1u n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap vi\u1ec7c h\u1ecdc tr\u1edf n\u00ean d\u1ec5 th\u1edf h\u01a1n m\u00e0 n\u00f3 c\u00f2n gi\u00fap qu\u00e1 tr\u00ecnh chinh ph\u1ee5c ki\u1ebfn th\u1ee9c c\u1ee7a b\u1ea1n tr\u1edf n\u00ean th\u00fa v\u1ecb h\u01a1n r\u1ea5t nhi\u1ec1u!\\n\\nNh\u01b0 vi\u1ec7c t\u00ecm hi\u1ec3u nh\u1eefng extension trong VS Code ch\u1eb3ng h\u1ea1n. N\u00f3 kh\u00f4ng gi\u00fap b\u1ea1n ki\u1ebfm ti\u1ec1n ngay, n\u00f3 c\u0169ng kh\u00f4ng ph\u1ea3i th\u1ee9 quan tr\u1ecdng nh\u1ea5t b\u1ea1n c\u1ea7n h\u1ecdc nh\u01b0ng n\u00f3 s\u1ebd gi\u00fap b\u1ea1n l\u00e0m vi\u1ec7c nhanh h\u01a1n v\u00e0 c\u00f3 c\u1ea3m h\u1ee9ng h\u01a1n khi code.\",\r\n   \"image\": \"post1.png\",\r\n   \"author\": \"tuongho\",\r\n   \"created_at\": \"2023-01-03T17:00:00.000Z\"\r\n },\r\n {\r\n   \"id\": 2,\r\n   \"title\": \"Top 10 k\u00eanh youtube b\u1ed5 \u00edch v\u1ec1 ReactJS v\u00e0 ph\u00e1t tri\u1ec3n web\",\r\n   \"content\": \"ReactJS l\u00e0 m\u1ed9t trong nh\u1eefng framework l\u1eadp tr\u00ecnh \u0111\u01b0\u1ee3c c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n quan t\u00e2m v\u00e0 y\u00eau th\u00edch. Hi\u1ec7n nay, c\u00f3 r\u1ea5t nhi\u1ec1u k\u00eanh Youtube v\u1ec1 ReactJS v\u00e0 c\u00e1c ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh, \u1edf \u0111\u00f3 b\u1ea1n c\u00f3 th\u1ec3 h\u1ecdc, tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u00e0 ph\u00e2n t\u00edch chuy\u00ean s\u00e2u.\\n\\n\u0110i\u1ec1u \u0111\u1eb7c bi\u1ec7t l\u00e0 ch\u00fang ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed, b\u1ea1n c\u00f3 th\u1ec3 h\u1ecdc b\u1ea5t c\u1ee9 khi n\u00e0o c\u00f3 th\u1eddi gian. Trong b\u00e0i vi\u1ebft n\u00e0y, 200Lab s\u1ebd gi\u1edbi thi\u1ec7u \u0111\u1ebfn b\u1ea1n top 10 k\u00eanh Youtube v\u1ec1 ReactJS v\u00e0 ph\u00e1t tri\u1ec3n web b\u1ed5 \u00edch m\u00e0 b\u1ea1n n\u00ean bi\u1ebft n\u1ebfu b\u1ea1n \u0111ang quan t\u00e2m \u0111\u1ebfn framework ReactJS.\",\r\n   \"image\": \"post2.png\",\r\n   \"author\": \"tuongho\",\r\n   \"created_at\": \"2022-12-30T17:00:00.000Z\"\r\n },\r\n {\r\n   \"id\": 3,\r\n   \"title\": \"T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng ReactJS \u0111\u1ec3 ph\u00e1t tri\u1ec3n website?\",\r\n   \"content\": \"Khi nh\u00ecn v\u00e0o m\u1ed9t website, b\u1ea1n th\u1ea5y \u0111i\u1ec1u g\u00ec thu h\u00fat b\u1ea1n nh\u1ea5t? Ph\u00f4ng ch\u1eef c\u1ee7a website, giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng hay nh\u1eefng thi\u1ebft k\u1ebf? H\u1ea7u h\u1ebft ng\u01b0\u1eddi d\u00f9ng th\u00edch m\u1ed9t website c\u00f3 giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng th\u00e2n thi\u1ec7n v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng, \u0111\u00f3 l\u00e0 n\u01a1i React xu\u1ea5t hi\u1ec7n.\\n\\nReactJS \u0111\u00e3 n\u1ed5i l\u00ean nh\u01b0 m\u1ed9t trong nh\u1eefng th\u01b0 vi\u1ec7n l\u1edbn nh\u1ea5t \u0111\u01b0\u1ee3c c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n v\u00e0 doanh nghi\u1ec7p s\u1eed d\u1ee5ng trong v\u00e0i n\u0103m qua. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 nh\u1eefng l\u00fd do v\u00ec sao ReactJS \u0111\u01b0\u1ee3c xem l\u00e0 ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u00e0 c\u00e1c developer n\u00ean l\u1ef1a ch\u1ecdn trong t\u01b0\u01a1ng lai.\",\r\n   \"image\": \"post3.png\",\r\n   \"author\": \"tuongho\",\r\n   \"created_at\": \"2022-12-31T17:00:00.000Z\"\r\n },\r\n {\r\n   \"id\": 4,\r\n   \"title\": \"ReactJS vs React Native - G\u00e0 c\u00f9ng m\u1ed9t m\u1eb9 li\u1ec7u c\u00f3 gi\u1ed1ng nhau?\",\r\n   \"content\": \"B\u1ea1n c\u00f3 \u0111ang r\u1ed1i gi\u1eefa ReactJS vs React Native? N\u00ean ch\u1ecdn c\u00e1i n\u00e0o th\u00ec t\u1ed1t h\u01a1n? C\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng code c\u1ee7a ReactJS cho React Native hay kh\u00f4ng? H\u00e3y kh\u00e1m ph\u00e1 c\u00e2u tr\u1ea3 l\u1eddi th\u00f4ng qua b\u00e0i vi\u1ebft so s\u00e1nh ReactJS vs React Native n\u00e0y b\u1ea1n nh\u00e9!\\n\\nTr\u01b0\u1edbc khi \u0111i v\u00e0o so s\u00e1nh chi ti\u1ebft ReactJS vs React Native, h\u00e3y c\u00f9ng t\u00ecm hi\u1ec3u s\u01a1 qua l\u1ecbch s\u1eed c\u1ee7a hai c\u00f4ng ngh\u1ec7 m\u1ea1nh m\u1ebd n\u00e0y.\\n\\nReactJS v\u00e0 React Native c\u00f3 m\u1ed9t l\u1ecbch s\u1eed kh\u00e1 l\u00e0 th\u00fa v\u1ecb\",\r\n   \"image\": \"post4.png\",\r\n   \"author\": \"tuongho\",\r\n   \"created_at\": \"2023-01-01T17:00:00.000Z\"\r\n },\r\n {\r\n   \"id\": 5,\r\n   \"title\": \"Docker l\u00e0 g\u00ec? Khi n\u00e0o n\u00ean d\u00f9ng Docker?\",\r\n   \"content\": \"Docker l\u00e0 m\u1ed9t trong nh\u1eefng requirement xu\u1ea5t hi\u1ec7n li\u00ean t\u1ee5c trong nh\u1eefng JD tuy\u1ec3n d\u1ee5ng backend developer trong nh\u1eefng n\u0103m g\u1ea7n \u0111\u00e2y. R\u1ed3i n\u00e0o l\u00e0 DevOps, r\u1ed3i SRE, CI\/CD \u0111\u1ec1u c\u1ea7n ph\u1ea3i bi\u1ebft Docker. Qua b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh hy v\u1ecdng s\u1ebd gi\u00fap c\u00e1c b\u1ea1n hi\u1ec3u \u0111\u01b0\u1ee3c m\u1ed9t ch\u00fat v\u1ec1 Docker v\u00e0 l\u00fd do t\u1ea1i sao l\u1ea1i c\u1ea7n n\u00f3 nh\u01b0 th\u1ebf.\",\r\n   \"image\": \"post5.png\",\r\n   \"author\": \"tuongho\",\r\n   \"created_at\": \"2023-01-02T17:00:00.000Z\"\r\n }\r\n]\r\n\r\n\r\n<\/pre>\n
              Layouts\/Main: ch\u1ec9 thay \u0111\u1ed5i n\u1ed9i dung b\u00e0i post, c\u00f2n l\u1ea1i layout s\u1ebd gi\u1eef nguy\u00ean header, footer.<\/h4>\n
              import type { ReactNode } from 'react';\r\nimport { Header } from '..\/components\/Header';\r\nimport { Footer } from '..\/components\/Footer';\r\n\r\n\r\ntype IMainProps = {\r\n children: ReactNode;\r\n};\r\n\r\n\r\nconst Main = (props: IMainProps) => (\r\n <>\r\n   <main className=\"bg-slate-900 min-h-screen\">\r\n     <div className=\"container lg:px-56 px-4\">\r\n       <Header blogName={'Blog NextJS'} \/>\r\n       <>{props.children}<\/>\r\n       <Footer \/>\r\n     <\/div>\r\n   <\/main>\r\n <\/>\r\n);\r\n\r\n\r\nexport { Main };\r\n<\/pre>\n
              Components\/Header<\/h4>\n
              \"Components\/Header\"
              Components\/Header<\/figcaption><\/figure>\n
               <\/p>\n
              Component\/Footer<\/h4>\n
              \"Component\/Footer\"
              Component\/Footer<\/figcaption><\/figure>\n
               <\/p>\n
              V\u00e0 \u0111\u00e2y s\u1ebd l\u00e0 trang index ch\u00ednh c\u1ee7a ch\u00fang ta v\u1edbi danh s\u00e1ch c\u00e1c b\u00e0i post:<\/span> pages\/index. <\/b>S\u1eed d\u1ee5ng k\u1ebft h\u1ee3p layout Main. \u1edf Index b\u1ea1n c\u00f3 th\u1ec3 c\u1ea5u h\u00ecnh th\u1ebb Head c\u1ee7a website theo c\u00e1ch c\u1ee7a m\u00ecnh \u0111\u1ec3 t\u0103ng hi\u1ec7u qu\u1ea3 SEO nh\u00e9.<\/span><\/p>\n
              import Head from 'next\/head';\r\nimport { Post } from '..\/components\/Post';\r\nimport { Main } from '..\/layouts\/Main';\r\n\r\n\r\nexport default function Home() {\r\n return (\r\n   <>\r\n     <Head>\r\n       <title>Blog NextJS<\/title>\r\n       <meta name=\"description\" content=\"Generated by create next app\" \/>\r\n       <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n       <link rel=\"icon\" href=\"\/favicon.ico\" \/>\r\n     <\/Head>\r\n     <Main>\r\n       <Post \/>\r\n     <\/Main>\r\n   <\/>\r\n );\r\n}\r\n\r\n\r\n<\/pre>\n
              Components\/Post:<\/h4>\n
              import Link from 'next\/link';\r\nimport JSON_POSTS from '..\/..\/public\/data\/posts.json';\r\nexport type PostType = typeof JSON_POSTS[number];\r\nimport moment from 'moment';\r\nexport const Post = () => {\r\n return (\r\n   <>\r\n     <div className=\"text-white py-4\">\r\n       <h1 className=\"text-4xl\">Latest<\/h1>\r\n       <div className=\"text-gray-500 py-4 border-b border-gray-700\">\r\n         A blog created with Next.js and Tailwind.css\r\n       <\/div>\r\n     <\/div>\r\n     {JSON_POSTS?.map((post) => {\r\n       return (\r\n         <div key={post.id} className=\"py-10 border-b border-gray-700\">\r\n           <div className=\"text-gray-500\">\r\n             {moment(post.created_at).fromNow()}\r\n           <\/div>\r\n           <div className=\"text-white text-2xl py-2\">{post.title}<\/div>\r\n           <div className=\"flex flex-wrap gap-4 text-emerald-600\">\r\n             <div>NEXT-JS<\/div>\r\n             <div>TAILWIND<\/div>\r\n             <div>FEATURE<\/div>\r\n           <\/div>\r\n           <div className=\"text-gray-500 py-4\">{post.content}<\/div>\r\n           <div className=\"text-emerald-600\">\r\n             <Link href={`post\/${post.id}`}>Read more \u2192<\/Link>\r\n           <\/div>\r\n         <\/div>\r\n       );\r\n     })}\r\n\r\n\r\n     <div className=\"text-emerald-600 flex justify-end mt-4\">All Posts \u2192<\/div>\r\n   <\/>\r\n );\r\n};\r\n\r\n\r\n<\/pre>\n
              Giao di\u1ec7n ho\u00e0n ch\u1ec9nh trang index:<\/span><\/h4>\n
              \"Giao
              Giao di\u1ec7n ho\u00e0n ch\u1ec9nh trang index<\/figcaption><\/figure>\n
               <\/p>\n
              C\u00e1c t\u00ednh n\u0103ng:<\/h2>\n
              T\u00ednh n\u0103ng Static Site Generation<\/span><\/h3>\n
              \"T\u00ednh
              T\u00ednh n\u0103ng Static Site Generation<\/figcaption><\/figure>\n
               <\/p>\n