강의

멘토링

로드맵

BEST
Programming

/

Front-end

Bắt đầu với Next.js (feat. phát triển dịch vụ bản đồ)

Đây là khóa học bao gồm các kiến thức cơ bản về Next.js. Chúng ta sẽ phát triển một dịch vụ bản đồ từ đầu đến cuối bằng Next.js.

(4.5) 46 đánh giá

905 học viên

  • vroomfan
프론트엔드
front-end
next.js
Next.js
SEO
vercel
ssr
ssg

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

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

  • Next.js cấu trúc cơ bản và API đa dạng

  • Tạo web bản đồ với Next.js

  • Triển khai dự án Next.js, Đăng ký công cụ tìm kiếm, Các loại tối ưu hóa

Next.js dành cho các nhà phát triển FE hàng đầu!
Tạo dịch vụ bản đồ cửa hàng dễ dàng và thú vị.

Từ việc tạo dịch vụ bản đồ đến phân phối và tối ưu hóa
Bắt đầu với Next.js ngay lập tức


Nếu bạn muốn xem mã của một dịch vụ web được tạo bằng Next.js,


Nếu bạn muốn biết quy trình hoàn thiện một dịch vụ web từ đầu đến cuối bằng công nghệ front-end mà không cần mã back-end,


Nếu bạn tò mò về các phương pháp tối ưu hóa khác nhau như SSR/SSG/CSR,

Nếu bạn là nhà phát triển front-end muốn tìm hiểu Next.js!

Khóa học này dành cho các nhà phát triển front-end ở cấp độ mới bắt đầu/mới tìm hiểu về Next.js.
Bạn có thể tìm hiểu tất cả các hàm và API cần thiết của Next.js bằng cách dễ dàng phát triển dịch vụ bản đồ sử dụng nhiều API khác nhau được Next.js hỗ trợ mà không cần bất kỳ mã phụ trợ nào.

Vậy tại sao lại là Next.js?

Next.js là một framework React mang đến trải nghiệm lập trình viên vượt trội, API đơn giản và trực quan, cùng nhiều tính năng tối ưu hóa. Nó hỗ trợ các phương thức SSR/SSG/CSR, đồng thời hỗ trợ các tính năng tối ưu hóa được thiết kế để thuận tiện cho nhà phát triển.

Sau khi làm việc với Next.js trong nhiều dự án, tôi nhận thấy những điểm mạnh của nó. Tôi muốn giới thiệu Next.js, dự kiến sẽ có tốc độ tăng trưởng nhanh hơn nữa trên thị trường front-end.


Giảm gánh nặng học tập,
Khái niệm này rõ ràng hơn.

Từ A đến Z với dịch vụ bản đồ

Bằng cách xây dựng một dịch vụ bản đồ, bạn sẽ học được tất cả các chức năng và API thiết yếu của Next.js cần thiết cho việc phát triển. Bằng cách tìm hiểu các API như next/link và next/image, có trong cả Next.js 12 và Next.js 13, bạn sẽ hiểu được những ưu điểm của v13.

Cải thiện kỹ năng phát triển front-end của bạn

Khi theo dõi các bài giảng, bạn sẽ học được những khái niệm cơ bản mà một nhà phát triển front-end cần biết, chẳng hạn như phát triển UI (HTML/CSS), hiệu suất và khả năng truy cập web, triển khai và đăng ký công cụ tìm kiếm.

Bài giảng hướng đến người học

Chúng tôi cung cấp mã nguồn cho mỗi lớp học, được sắp xếp thành các nhánh riêng biệt, để hỗ trợ quá trình học. Chúng tôi cũng cung cấp phụ đề cho tất cả các video bài giảng để đảm bảo bạn có thể theo dõi nội dung.

Bài giảng sẽ được cập nhật

Chúng tôi sẽ bổ sung thêm thông tin khi cần thiết. Chúng tôi cũng sẽ cập nhật khóa học với các tin tức liên quan đến Next.js 13.

10 điều bạn cần biết về API Next.js khi xây dựng dịch vụ bản đồ cửa hàng ✅

  1. Đi đến trang bản đồ/trang phản hồi với liên kết tiếp theo
  2. Tối ưu hóa hình ảnh logo/hình ảnh cửa hàng của bạn với next/image
  3. Đang tải tập lệnh bản đồ bằng next/script
  4. Truy xuất dữ liệu lưu trữ bằng API Routes
  5. Hiển thị trước các trang bản đồ bằng getStaticProps
  1. Kết xuất trước các tuyến đường động cho tất cả các cửa hàng với getStaticPaths
  2. Lấy dữ liệu trang phản hồi từ getServerSideProps
  3. Sự khác biệt về API giữa Next.js 12 và 13, chẳng hạn như next/link và next/image.
  4. Kiểm tra hiệu suất web và cải thiện khả năng truy cập web và SEO với Lighthouse.
  5. Triển khai các dự án Next.js thông qua Vercel

Chương trình học tập 📚

👉 Xem trước dự án bản đồ được tạo trong bài giảng (liên kết)

Phần 0: Thiết lập môi trường phát triển

  • Trước khi tìm hiểu nội dung thực tế, chúng ta sẽ tìm hiểu các cài đặt cơ bản của Next.js.
  • Bắt đầu một dự án với create-next-app và thiết lập eslint và prettier.

Phần 1: Hiểu về việc lấy dữ liệu

  • Tìm hiểu nhiều kỹ thuật truy xuất dữ liệu khác nhau trong Next.js (SSR/SSG/CSR).
  • Hiểu các nguyên tắc tối ưu hóa chuyển tiếp trang trong Next.js thông qua đầu ra bản dựng tiếp theo và tab mạng trong công cụ dành cho nhà phát triển.
  • Tìm hiểu next/link và next/router.

Phần 2: Tạo giao diện người dùng tiêu đề

  • Tìm hiểu API next/image để tải hình ảnh logo.
  • Tìm hiểu về các tính năng và tối ưu hóa dung lượng của Next.js 13 next/image và Next.js 12 next/legacy/image.
  • Dựa trên những gì bạn đã học ở Phần 1, chúng ta sẽ định tuyến trang bản đồ và trang phản hồi.

Phần 3: Tạo giao diện người dùng bản đồ

  • Tìm hiểu API next/script để tải các tập lệnh bản đồ.
  • Tìm hiểu cách lưu trữ trạng thái trong URL bằng next/router.
  • Vẽ biểu tượng đánh dấu bằng hình ảnh đánh dấu sprite.
  • Xử lý các sự kiện nhấp chuột cho bản đồ và điểm đánh dấu.
  • Quản lý dữ liệu cửa hàng của bạn trên toàn cầu một cách dễ dàng bằng SWR.

Phần 4: Tạo trang chi tiết cửa hàng

  • Tạo các tuyến động cho các trang chi tiết cửa hàng và tìm hiểu cách sử dụng API getStaticPaths.
  • Triển khai giao diện chi tiết cửa hàng.
  • Kết nối trang thông tin chi tiết cửa hàng và trang bản đồ bằng next/router.

Phần 5: Kiểm tra hiệu suất web với Lighthouse

  • Kiểm tra hiệu suất web bằng Chrome Lighthouse.
  • Cải thiện hiệu suất web, khả năng truy cập web và SEO.
  • Điền vào phần đầu HTML bằng thư viện _document hoặc next-seo.

Phần 6: Triển khai với Vercel

  • Triển khai trang web đã hoàn thành lên Vercel.
  • Tạo các tệp robots.txt và sitemap.xml bằng thư viện next-sitemap.
  • Đăng ký trang web của bạn với Naver Search Advisor và Google Search Console.
  • Chúng tôi sử dụng Google Analytics.

Phần 7: Tổng kết dự án

  • Tạo API GET phản hồi dữ liệu lưu trữ bằng cách sử dụng API Routes Next.js.
  • Trang Phản hồi giải thích cách đọc và ghi dữ liệu vào Firebase Cloud Firestore.
  • Chúng tôi đang hoàn thiện dự án tạo ra dịch vụ bản đồ.

Phần 8~: Câu hỏi và câu trả lời và củng cố

  • Chúng tôi cung cấp các bài giảng bổ sung khi cần giải thích thêm hoặc có câu hỏi quan trọng phát sinh trong quá trình giảng bài.
  • Chúng tôi sẽ bổ sung thêm thông tin chi tiết khi Next.js 13 ra mắt.

Chúng tôi sẽ chia sẻ những mẹo chúng tôi đã học được khi phát triển dịch vụ và sản phẩm với Next.js.

Với tư cách là trưởng nhóm front-end tại một công ty khởi nghiệp trong bốn năm, tôi đã phát triển sản phẩm chính và website bằng Next.js. Tôi cũng đã phát triển một dịch vụ trò chơi web bằng Next.js, giành giải ba tại cuộc thi JUNCTION ASIA 2022, và một dịch vụ web sử dụng Next.js T3 Stack đã giành giải nhì tại cuộc thi HACKATHON KAIST SPARCS. Tôi muốn chia sẻ những lợi ích và bí quyết mà tôi đã tích lũy được khi làm việc với Next.js với nhiều người hơn nữa. 🙂


Hỏi & Đáp 💭

H. Tại sao tôi nên học Next.js?

Trong số các framework phát triển front-end hiện có, tôi tin rằng Next.js mang đến trải nghiệm phát triển vượt trội, API trực quan và hỗ trợ nhiều tối ưu hóa. Trong khi các framework trước đây đòi hỏi phải cân nhắc ưu và nhược điểm của nhiều công nghệ, Next.js theo đuổi con đường chỉ tập trung khai thác điểm mạnh của từng công nghệ và trình bày chúng thông qua API. Hơn nữa, các bản cập nhật liên tục sẽ đảm bảo Next.js được ứng dụng rộng rãi trong các ứng dụng ngày càng phát triển.

H. Khóa học này khó như thế nào?

Khóa học này được thiết kế để giới thiệu cho bạn về Next.js, và bạn sẽ theo dõi mã nguồn, video và phụ đề để hoàn thành dự án một cách tự nhiên. Mỗi khóa học đều có các nhánh riêng biệt, cho phép bạn bỏ qua hoặc quay lại các phần dựa trên trình độ của mình. Bạn cần có kiến thức cơ bản về React (cú pháp JSX, useState/useEffect hook, v.v.).

Nếu bạn mới làm quen với Next.js, chúng tôi khuyên bạn nên bắt đầu bằng các bước sau:

  1. Tìm hiểu luồng tổng thể bằng cách xem bài giảng và mã được cung cấp.
  2. Thay đổi và cải thiện mã theo cách của riêng bạn.
  3. Hoàn thành dự án Next.js của riêng bạn.

H. Ngoài Next.js, bạn còn sử dụng những thư viện nào khác trong lớp học?

Chúng tôi sử dụng TypeScript, ESlint/Prettier, SWR, next-seo, next-sitemap, Sass (scss), react-icons, copy-to-clipboard, @types/navermaps và firebase (Cloud Firestore). Ngoại trừ các thư viện cốt lõi (TypeScript và scss), chúng tôi chỉ sử dụng những thư viện tối thiểu cần thiết để triển khai dịch vụ. Chúng tôi không sử dụng bất kỳ thư viện UI hoặc CSS-in-JS bổ sung nào.

💾 Những điều cần lưu ý trước khi tham gia lớp học

  • Bài giảng dựa trên Next.js phiên bản 13.0.7 và thư mục trang .
  • Lý thuyết và thực hành được giảng dạy theo tỷ lệ 1:2. Phần thực hành sẽ trình bày ngắn gọn về các triển khai UI đơn giản, tập trung vào các khái niệm Next.js đã học trong lý thuyết.
  • Chúng tôi sử dụng IDE WebStorm và Yarn của JetBrains làm trình quản lý gói. Nếu bạn gặp bất kỳ khó khăn nào khi sử dụng VSCode hoặc npm, vui lòng liên hệ với chúng tôi.
  • Vì đây là bài giảng về Next.js, một React Framework , nên cần có kiến thức trước về React (cú pháp jsx, hook useState/useEffect, v.v.)
  • Chúng tôi sử dụng scss. Chúng tôi không sử dụng thư viện CSS-in-JS (emotion, styled-components).
  • Ngoài React và yarn (npm), bạn cũng cần có kiến thức cơ bản về TypeScript và Git.
  • Chúng tôi sử dụng SWR làm thư viện quản lý trạng thái (cùng thư viện do nhóm Vercel phát triển với tên gọi Next.js). Để giảm thiểu thời gian học, chúng tôi chỉ sử dụng SWR cho mục đích lưu trữ trạng thái toàn cục tối thiểu.
  • Chúng tôi cung cấp mã nguồn đầy đủ, bao gồm các nhánh cho mỗi lớp. Chúng tôi khuyên bạn nên làm theo video, tập trung vào mã nguồn được cung cấp. (Chúng tôi không khuyến khích sao chép mã chính xác như hiển thị trên màn hình.) Ngoài ra, việc tham khảo tài liệu chính thức của Next.js có thể hữu ích.
  • Ngoài việc trả lời các câu hỏi, chúng tôi sẽ cập nhật các video bổ sung khi chúng tôi thấy cần thiết.

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

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

  • Next.js를 học thử muốn những bạn

  • Người muốn xem tổng thể quá trình phát triển web service.

  • Những người muốn thử làm dịch vụ bản đồ

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

  • React(cú pháp jsx, cách sử dụng useState/useEffect)

  • cách dùng git

  • Cách sử dụng yarn (hoặc npm)

  • Cú pháp TypeScript

Xin chào
Đây là

1,028

Học viên

49

Đánh giá

87

Trả lời

4.5

Xếp hạng

2

Các khóa học

안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.

포트폴리오

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

Tất cả

45 bài giảng ∙ (4giờ 7phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

46 đánh giá

4.5

46 đánh giá

  • 박제영님의 프로필 이미지
    박제영

    Đánh giá 24

    Đánh giá trung bình 4.8

    5

    100% đã tham gia

    한 줄 소감 : 큰 기대 없이 결제햇다가 이 강의 좋다 라고 느낌 결제계기 : 타 강의 결제한게 있는데 업무땜에 짬이 안나다 신규는 모던 브라우저 환경으로 진행한다하여 필요한 시기가 되어 기존 결제강의 보는데 너무 길고 지루해서 짧은거 찾다가 목차보고 결제함

 좋았던 점 1. 브라우저 열고 디버깅하면서 원리를 알려주어 깊이있는 공부가 되었다
(단순 구현이 아닌 깊이있는 공부를 할 수 있었다) 2. 불필요한 설명을 없이 next.js에 초점을 맞춘다 (scss, css.module, react, 캐시 배경지식 등) 3. 교수법이 좋았다 
브랜치 체크아웃하면서 주석만 제거하고 여러 비교사항 보여주며 차이점 및 효율적으로 사용하기 위한 방법을 직접 보여준다 (차이점 그리고 활용법을 군더더기 없는 설명을 해주었다) 4. 가격이 혜자
 이정도 퀄리티에 이 가격 너무 혜자라고 생각된다. 5. 질문에 대한 답변이 굉장히 상세하다 
이렇게까지 시간을 써서 답변을 해준다고? 라고 느껴질 정도였다 6. tailwind 사용 X
 스타일링을 위한 스타일을 외우고 html 태그에 스타일링하는게 너무 불편한데 다행이였습니다. 7. 공식문서 내용도 같이 봐줘서 내가 직접봐야되는 비용이 감소 8. seo관련된 내용 잘 몰라서 답답햇는데 생각보다 쉽게 배울 수 있엇고 요약도 넘 잘되잇음 9.웹 접근성을 고려한 html 코드 작성을 왜 해야하는지 알게되엇음 개인적으로 추가되었으면 하는 내용 1. vscode에서 monorepo로 next.js 사용시 디버깅 셋팅이 쉽지 않아서 이것도 알려주시면 너무 좋을 것 같습니다. (디버깅 셋팅이라는건 중단점 말하는 것임 next.js 공식문서에서도 모노레포 디버깅 셋팅은 나와있지 않아요)

    • LuckyLatte님의 프로필 이미지
      LuckyLatte

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      정말 명강의입니다. 도큐를 기반으로 next의 특징을 바닥부터 꼼꼼히 설명해주십니다. 덕분에 영문서 대충 읽어서 애매했던 개념을 깔끔하게 이해할 수 있었습니다. 앞으로 SSR의 특징과 장점을 잘 살려서 개발할 수 있을 것 같습니다. 개발부터 배포, 검색엔진에 등록하는 방법과 SEO, 최적화까지 한큐에 알려주니 더 좋았습니다. Next@13의 layout 개념도 추가강의로 나오길 기대하겠습니다!!

      • 황호세님의 프로필 이미지
        황호세

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        76% đã tham gia

        Next.js 기본기를 쌓기 위해 들었는데 Next.js 실력이 확 늘었습니다. 감사합니다

        • SHAN님의 프로필 이미지
          SHAN

          Đánh giá 1

          Đánh giá trung bình 5.0

          5

          100% đã tham gia

          감사합니다. 잘 들었습니다. 강의를 만드신 분에 대해서도 궁금해서 찾아보게 되었어요. 본받으면서 프론트 공부 하겠습니다.

          • tlsgkdals71님의 프로필 이미지
            tlsgkdals71

            Đánh giá 6

            Đánh giá trung bình 5.0

            5

            78% đã tham gia

            next13에 대해서 정말 자세하게 강의하신다 내가 원하던 강의!!!! 감사합니다.!!!

            Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày

            33.000 ₫

            25%

            925.842 ₫

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

            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!