|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-by-example-react-tailwind-css-strapi-cms-prisma-orm-korean/
课程评论：没有评论
**课程名称：** 【AI字幕】通过丰富示例掌握 Next.js！ **课程概述：** 本课程旨在通过实际项目开发，深入教授 Next.js 的各项功能。课程内容涵盖了 Next.js 14 的 Server Actions 和 Next.js 13.4 的 App Router，同时也讲解了依旧得到支持的 Pages Router。 **主要内容：** * **第一部分：** * 将 Next.js 作为静态网站生成器，学习预渲染页面。 * 掌握文件系统路由、预渲染、React 服务器组件、客户端组件的区别及数据获取。 * 使用 Tailwind CSS 进行样式设计，嵌入自定义字体，并通过元数据优化 SEO。 * 学习部署选项，包括 Vercel 等托管平台及项目静态导出。 * **第二部分：** * 探索 Next.js 作为全栈框架，支持动态渲染、时间间隔和按需重新验证。 * 使用 Headless CMS Strapi 存储数据，学习通过 REST API 调用 CMS 数据，并实现前端页面根据 CMS 数据变更自动更新。 * 了解 Next.js 的图像优化功能，包括按需图像转换、调整大小以及图像的延迟加载。 * 学习集成第三方 UI 组件，并判断何时使用客户端数据获取。 * **第三部分：** * 通过 Prisma ORM 和 SQL 数据库展示数据库集成。 * 学习使用 Server Actions 处理表单提交。 * 通过 Streaming 和 Suspense 优化页面加载。 * **第四部分：** * 集成认证功能，使用 Cookies 和 JSON Web Tokens 实现登录流程。 * 学习将用户数据存储在数据库中，并限制部分内容的访问权限。 **适用人群：** 本课程提供 JavaScript 或 TypeScript 的示例，并提供完整的源代码，方便学习者跟随实践。 **课程特点：** * 提供韩语 AI 字幕。 * 可以通过 Q & A 板块向讲师提问（请用英文提问）。 * 涵盖 Next.js 最新功能及仍然支持的旧版本。 * 通过实际项目驱动学习，理论与实践相结合。
[꼭 읽어주세요] 한글 AI 자막 강의란?유데미의 한국어 [자동] AI 자막 서비스로 제공되는 강의입니다.강의에 대한 질문사항은 Mirko 강사님이 확인하실 수 있도록 Q & A 게시판에 영어로 남겨주시기 바랍니다.업데이트 내역: 이 강의는 23년 10월 출시된 Next.js 버전 14에 포함된 Server Actions 과 23년 5월 출시된 Next.js 버전 13.4에 포함된 App Router 기능도 다루고 있습니다. 초반 13시간은 App Router 에 대해 설명하고, 나머지 시간에는 이전 버전이지만 여전히 지원되는 Pages Router 에 대해 설명합니다."웹을 위한 React 프레임워크"라고 불리는 Next.js 를 사용하면 서버 측 렌더링 React 컴포넌트를 통해 고도로 최적화된 웹 애플리케이션을 쉽게 구축할 수 있습니다.이 강의는 완전한 프로젝트를 단계별로 개발하면서 Next.js 에 대해 학습할 수 있습니다.1부 에서는 Next.js 를 정적 사이트 생성기 로 사용하여 모든 페이지를 정적 HTML, CSS 및 JavaScript 로 사전 렌더링하는 방법을 가르쳐드립니다.파일 기반 라우팅, 사전 렌더링, React 서버 컴포넌트, 서버와 클라이언트 컴포넌트의 차이점, 서버 컴포넌트에서 데이터를 가져오는 방법과 같은 기본적인 Next.js 개념을 알려드립니다.또한 스타일링을 위해 인기 있는 Tailwind CSS 프레임워크 를 사용하고, 여러분의 애플리케이션에 Custom Fonts 를 임베딩하는 방법과 메타데이터를 사용하여 페이지를 더 SEO 친화적으로 만드는 방법을 보여줍니다.배포 섹션에서는 Vercel과 같은 완전 관리형 플랫폼 사용법부터 모든 웹 서버에 업로드할 수 있는 Static Export 수행에 이르기까지 프로덕션 환경에서 애플리케이션을 실행하기 위한 다양한 옵션을 소개합니다.2부에서는 동적 렌더링, 시간 기반 재검증, 온디맨드 재검증과 같은 기능을 활성화하여 Next.js 를 풀스택 프레임워크로 사용하는 방법을 보여드립니다.Headless CMS인 Strapi 를 사용하여 데이터를 저장하고, Next.js 앱 에서 REST API 를 호출하는 방법과, CMS의 데이터가 변경될 때 프론트엔드 페이지를 업데이트하는 다양한 옵션을 보여드립니다.또한 이미지 최적화 를 다루며, Next.js가 어떻게 이미지를 온디맨드 방식으로 변환하고 크기를 조정하고 브라우저에서 지연 로딩을 활성화할 수 있는지 보여줍니다.그런 다음 여러분의 앱에서 서드파티 UI 컴포넌트를 통합하는 방법과 언제 클라이언트 측 데이터 불러오기 를 사용하는 것이 좋은지 보여드립니다.3부에서는 Prisma Object/Relational Mapper 와 SQL 데이터베이스 를 사용하여, 데이터베이스 통합의 예시를 보여드립니다. 그런 다음 Server Actions 으로 양식 제출을 처리하는 방법과, Streaming 및 Suspense 를 사용하여 페이지 로드를 최적화하는 방법을 설명합니다.마지막 파트에서는 인증 을 추가하여 쿠키와 JSON 웹 토큰을 사용하여 일반적인 Sign In 흐름을 구현하고, 데이터베이스 테이블에 사용자 데이터를 저장하고, 인증된 사용자에게만 콘텐츠를 제한하는 방법을 보여줍니다.여러분은 JavaScript 또는 TypeScript 를 사용하여 예제를 따라할 수 있습니다. 전체 소스 코드가 제공되며, 모든 강의에서 변경 사항을 쉽게 확인하실 수 있습니다.
