강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Làm quen với Next.js - Hãy xem tài liệu chính thức

Tìm hiểu Next.js mới nhất với tài liệu chính thức. Bây giờ bạn có thể hiểu tại sao Next.js lại cần thiết như một công cụ giải quyết vấn đề!

(4.9) 68 đánh giá

726 học viên

  • hajoeun
3시간 만에 완강할 수 있는 강의 ⏰
next.js
next.js13
Next.js
공식문서
React
TypeScript

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Hiểu nhu cầu về Next.js như một công cụ giải quyết vấn đề

  • Tìm hiểu và nắm vững các khái niệm cơ bản về Next.js và App Router

  • Hương vị của thành phần máy chủ (RSC) được giới thiệu trong React 18

Học với Carrot Engineer
Next.js 13! 💡

Nếu bạn là một nhà phát triển front-end, Next.js

Next.js là một công cụ mạnh mẽ để xây dựng và triển khai các ứng dụng web.
Next.js, công cụ cho phép xây dựng ứng dụng web nhanh chóng và hiệu quả, hiện đang được nhiều công ty như Netflix, Nike và TikTok sử dụng tích cực.

Xin chào! Tôi là Ha Jo-eun 👋

Sau khi làm việc tại Maple và Banksalad, hiện tại tôi đang làm kỹ sư front-end tại Carrot.

Các kỹ sư front-end thường cảm thấy choáng ngợp trước những công nghệ mới được giới thiệu mỗi ngày . Có lẽ bạn cũng đang cảm thấy áp lực từ Next.js. Áp lực này có thể đã tăng lên với bản phát hành gần đây của Next.js 13, tích hợp các tính năng mới nhất của React 18.

Tôi cũng từng như vậy. Tôi đã từng sử dụng Next.js trước đây, nhưng tôi không hiểu những khái niệm mới.

Tôi đã tạo ra khóa học này sau khi nỗ lực tìm hiểu một công nghệ mới. Có lẽ bạn cũng biết rằng mình học được nhiều nhất khi giảng dạy. Tôi đã chuẩn bị khóa học này với tâm thế học hỏi và chia sẻ những gì mình đã học được. Thông qua khóa học này, tôi hy vọng sẽ truyền tải đến bạn những giá trị sau.

  • 1️⃣ Hãy để tôi cho bạn biết lý do tại sao bạn nên học Next.js trong số rất nhiều framework khác.
    • Tôi hy vọng bạn sẽ có được chút kiến thức bổ ích để làm kim chỉ nam khi lựa chọn công cụ mới với tư cách là kỹ sư front-end trong tương lai.
  • 2️⃣ Chúng ta sẽ xem xét các khái niệm chính bạn cần biết trong Next.js phiên bản 13.
    • Khi chúng ta xem xét hệ thống định tuyến mới, App Router, các thành phần máy chủ, truy xuất dữ liệu, lưu trữ đệm và xác thực lại, tôi hy vọng bạn sẽ nghĩ, "Thực ra cũng không khó lắm đâu."
  • 3️⃣ Áp dụng các khái niệm cốt lõi bạn đã học khi tạo ứng dụng .
    • Tôi hy vọng rằng bạn sẽ mắc lỗi và gặp phải lỗi trong quá trình này, đồng thời thu được những thông tin có giá trị hữu ích trong thực tế.

Tôi làm điều này với suy nghĩ về người này 💁‍♂️

😢 Next.js... Tôi là người duy nhất không biết

Tôi đang học React và áp dụng nó vào công việc, nhưng tôi chưa thực sự hiểu rõ về Next.js. Mọi người đều nói về nó, nhưng tôi cảm thấy mình là người duy nhất không biết về nó, nên tôi rất lo lắng.

📌 Việc người khác bàn tán về một công nghệ mới không có nghĩa là bạn phải học nó. Không bao giờ là quá muộn để học khi bạn thực sự cần. Tuy nhiên, nếu bạn muốn thảo luận về Next.js với các nhà phát triển khác, khóa học của tôi sẽ rất hữu ích!

😵‍💫 Thậm chí còn khó để xem tài liệu chính thức

Tôi đang cố gắng học Next.js phiên bản 13, nhưng vẫn chưa hiểu tài liệu chính thức. Tôi rất mong ai đó có thể tóm tắt những điểm chính từ tài liệu chính thức để chúng ta có thể cùng nhau học tập.

📌 Mặc dù tài liệu chính thức chắc chắn là một nguồn học tập giá trị, nhưng khối lượng kiến thức đồ sộ của nó có thể gây choáng ngợp. Chẳng phải sẽ hiệu quả và tiết kiệm thời gian hơn nếu có một giảng viên giàu kinh nghiệm chỉ ra những điểm bạn cần học sao? Bài giảng này tóm tắt các khái niệm chính dựa trên tài liệu chính thức của Next.js.

🤔 Tôi thực sự nên viết nó như thế nào?

Tôi đã làm theo tài liệu chính thức, nhưng nó không hoạt động như mong đợi. Tôi không biết có vấn đề gì. Tôi đã tìm kiếm, nhưng khó tìm được kết quả tốt, có lẽ vì Next.js 13 mới được phát hành gần đây.

📌 Khi làm theo mã trong tài liệu chính thức, bạn sẽ thường gặp phải những trường hợp mã không hoạt động như mong đợi. Tôi đã bối rối vài lần khi chuẩn bị cho bài giảng này. Trong bài giảng này, tôi sẽ chia sẻ mã thực tế, hoạt động tốt.


Những gì bạn sẽ đạt được từ khóa học này 💎

1. Quan điểm về công nghệ đang thay đổi.

Giống như nhiều công nghệ khác, tôi tin rằng Next.js ra đời để giải quyết một vấn đề. Trong bài giảng này, tôi muốn truyền đạt các khái niệm cốt lõi và giải thích ý nghĩa của từng công cụ.

  • Hiểu cách các framework JavaScript đã phát triển để đưa Next.js đến với thế giới.
  • Bạn có thể thấy tại sao Next.js là một công cụ đáng để học như một công cụ giải quyết vấn đề.

2. Bạn sẽ có tài liệu học tập để sử dụng bất cứ lúc nào.

Tôi tin rằng một bài giảng hay sẽ đọng lại trong đầu bạn rất lâu. Tuy nhiên, trí nhớ của chúng ta có hạn. Tôi muốn cung cấp sự hỗ trợ thiết thực bằng cách cung cấp một cẩm nang và mã nguồn để bạn có thể truy cập bất cứ khi nào cần.

  • Chúng tôi cung cấp một sổ tay tóm tắt các khái niệm cốt lõi từ tài liệu chính thức của Next.js.
  • Chúng tôi cung cấp mã nguồn cho dự án mà chúng tôi đã cùng nhau tạo ra trong lớp.
  • Chúng tôi sẽ trả lời câu hỏi của bạn sớm nhất có thể. Khi số lượng đăng ký tăng lên, chúng tôi sẽ mở một kênh riêng.

Bạn sẽ học được gì? 📚

Tổng cộng nó bao gồm ba phần.

Mục 1.
Tại sao nên học Next.js?

Hãy cùng xem xét những gì đã xảy ra trước khi Next.js ra đời. Chúng tôi đã dành thời gian để tìm hiểu những thách thức mà các công cụ như jQuery, AngularJS và React đang cố gắng giải quyết, bắt đầu từ sự xuất hiện của JavaScript. Dĩ nhiên, bạn sẽ được tìm hiểu bối cảnh dẫn đến sự ra đời của Next.js!

Phần 2
Học những điều cơ bản về Next.js

Chúng tôi đã chắt lọc những kiến thức cốt lõi từ tài liệu chính thức của Next.js. Bạn sẽ tìm hiểu Next.js là gì và những điểm mới trong Next.js 13. Bạn sẽ hiểu rõ hơn về thành phần máy chủ mới được giới thiệu, định tuyến dựa trên hệ thống tệp, tìm nạp dữ liệu và siêu dữ liệu!

Mục 3.
Làm quen với Next.js

Đây là quá trình áp dụng những kiến thức đã học ở chương trước vào mã nguồn thực tế. Bằng cách xây dựng một ứng dụng thời tiết, bạn sẽ có thể áp dụng những khái niệm mà trước giờ bạn chỉ nghĩ trong đầu vào thực tế. Bạn sẽ trực tiếp gọi API thời tiết và học cách lấy dữ liệu, lưu trữ đệm và xác thực lại dữ liệu, đồng thời thực hành với Next.js!


Xin lưu ý 📢

Để tôi giới thiệu cho bạn môi trường thực hành và tài liệu học tập! Tôi đã sử dụng MacBook Air M1 với bộ nhớ 8GB .

Môi trường thực hành

  • Hệ điều hành và môi trường: macOS, Node.js 18.17.0
  • Công cụ được sử dụng: VSCode
  • Dịch vụ được sử dụng: Vercel , WeatherAPI , TimeAPI

Tài liệu học tập

  • Một cuốn sổ tay được cập nhật liên tục dựa trên phản hồi
  • Mã nguồn của ứng dụng thời tiết mà chúng tôi đã cùng nhau tạo ra

Trước khi tham dự buổi thuyết trình

  • Tôi khuyên bạn nên nghe những bài giảng miễn phí trước.
  • Xem bài thuyết trình về mã sạch tại Banksalad cũng sẽ giúp bạn hiểu được phong cách bài giảng.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người muốn hiểu các khái niệm chính của Next.js

  • Những người muốn dùng thử các tính năng mới nhất của React

  • Những người quan tâm đến việc chọn khung JavaScript

Cần biết trước khi bắt đầu?

  • HTML & CSS

  • JavaScript

  • Phản ứng

  • Bản đánh máy

Xin chào
Đây là

1,054

Học viên

80

Đánh giá

45

Trả lời

4.8

Xếp hạng

3

Các khóa học

마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.

 

"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.

Chương trình giảng dạy

Tất cả

22 bài giảng ∙ (1giờ 54phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

68 đánh giá

4.9

68 đánh giá

  • Peter Cha님의 프로필 이미지
    Peter Cha

    Đánh giá 8

    Đánh giá trung bình 4.6

    5

    45% đã tham gia

    내가 Next.js를 배울 때 이 강의로 시작했으면 훨씬 덜 답답했을텐데..! 라는 생각이 계속 나는 강의입니다. 강사님의 외부 강연과 유튜브 영상 등을 통해 강사님을 이전부터 알고 있었는데 이렇게 강의를 내셨다고 해서 들어보게 됐어요. 강의를 들어보니 확실히 공식 문서를 제대로 읽지 않고, 일단 이렇게 하면 이런 기능이 된다!식의 실무 위주로만 배웠던 학습법의 단점들이 커버되는 느낌입니다. 마치 친절한 학교 선배가 옆에서 이야기 하듯이 설명을 해주는 느낌이라 듣기도 편했고, 'use client'면 CSR인줄 이때까지 알았는데 바로 아니라고 설명해주고 시작하는 부분에서 뭔가 사람들이 간과하기 쉬운 점들을 탄탄하게 채워가며 기본기를 잘 다질 수 있는 좋은 강의라는 느낌을 받습니다.

    • 밀크티님의 프로필 이미지
      밀크티

      Đánh giá 26

      Đánh giá trung bình 4.8

      5

      91% đã tham gia

      1년미만 주니어 개발자입니다. 갑작스레 프리랜서 개발자로 일하게 되었는데. Next 13기반 프로젝트여서 이 강의만 보고 투입되었습니다. 에센셜하게 반드시 알아야 하는 부분들을 공식문서 토대로 잘 설명해주시고, 질문에 대한 두루뭉술한 대답이 아닌 명확하고 상세한 답변을 제공해주셔서 수강생에게 해주시는 답변들을 주르륵 보고있노라면, 강의의 별책부록을 보고있는 느낌이 들었습니다. 부족한 자신감을 지식으로 채울 수 있도록 성심성의껏 도와주고 계신다는 느낌을 받았기에. 답례로 드릴 것이라곤 보잘것 없는 이런 수강평뿐이네요. 수강과 연관된 평은 아니나. 혹시 여유되신다면 예비/주니어 개발자분들은 강사님의 블로그 포스팅을 한번 훑어보시면 좋겠습니다. 우리가 개발자로서 고민하는 안개같은 고민을 대신 모아서 적어 놓은 것 같기도하고, 읽다보면 어떤 개발자가 될지 생각에 빠지게 되기도 하며, 회사와 내가 서로를 선택하는 과정을 글을 통해 간접체험 할수 있습니다. 재밌고 읽다보면 감정이입이 되서 심오(?)해집니다. 글만 봐도 좋은 개발자이심이 보입니다. 네카라쿠배당토같은 타이틀만 보며 자책하던 스스로에게 큰 물음표를 던지게 해주셔서 정말 감사합니다. 스스로를 돌아볼 줄 알고 글을 통해 본인의 상황과 능력 등을 정의할 줄 아는 하조은님 같은 개발자가 되어야겠노라-. 하고 목표를 세웠네요. 좋은 스승님이십니다.

      • 오일님의 프로필 이미지
        오일

        Đánh giá 6

        Đánh giá trung bình 4.3

        5

        45% đã tham gia

        리액트를 어느정도 아는사람이 듣기엔 이만한게 없네요 최고입니다. 쓸데없는 설명도없고 궁금한 부분만 쏙쏙 알려줘서 좋습니다.

        • jinho kim님의 프로필 이미지
          jinho kim

          Đánh giá 1

          Đánh giá trung bình 5.0

          5

          32% đã tham gia

          next.js를 처음 배우면서 공식문서를 봐도 무슨 말인지 이해하기 힘들었는데 정말 핵심을 간략하게 잘 설명해주셔서 많은 도움이 된 것 같습니다~제가 인프런에서 여러 수업을 들었지만 댓글은 처음 남겨보는데요, 앞으로도 좋은 강의 많이 부탁드리겠습니다~

          • 공부하자님의 프로필 이미지
            공부하자

            Đánh giá 15

            Đánh giá trung bình 4.9

            5

            73% đã tham gia

            너무 짧은거 아니야? 라고 해서 내용도 가벼울거라 생각했는데, Next.js 를 다는 아니지만 전반적으로 주요 기능을 살펴볼 수 있어서 좋았던 것 같습니다. 후속 강의도 있다고 하셔서 더 기대가 됩니다!

            538.096 ₫

            Khóa học khác của hajoeun

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!