Is this course right for you?
这门课程适合你吗？

If you plan to start your career as a developer or improve your programming skills, this course is right for you. Learn how to build a fantastic portfolio website you can share with your colleagues or future employers.
如果您打算以开发人员的身份开始您的职业生涯或提高您的编程技能，那么本课程适合您。了解如何建立一个出色的投资组合网站，您可以与您的同事或未来的雇主分享。

Get all you need to start web development in one course! Start with web development technologies and move to more advanced topics until your application is deployed to Heroku or Vercel and accessible online on the internet. This course covers the latest topics and React JS and Next JS versions.
在一门课程中获得开始 Web 开发所需的一切！从 Web 开发技术开始，然后转向更高级的主题，直到您的应用程序部署到 Heroku 或 Vercel 并在 Internet 上在线访问。本课程涵盖最新主题以及 React JS 和 Next JS 版本。

Course Structure is the following:
课程结构如下：

• [Project 1]: Resource Application (Beginners)
  [项目1]：资源应用（初学者）

• [Project 2]: Content Application (Beginners)
  [项目2]：内容应用（初学者）

• [Project 3]: Portfolio Application (Beginners/Intermediate)
  [项目3]：作品集申请（初级/中级）

What is Next.js? 什么是Next.js？

Next.js is a React framework that provides infrastructure and simple development experience for server-side rendered(SSR) applications.
Next.js 是一个 React 框架，为服务器端渲染 （SSR） 应用程序提供基础设施和简单的开发体验。

• An intuitive page-based routing system (with support for dynamic routes)
  直观的基于页面的路由系统（支持动态路由）

• Pre-rendering, both static generation (SSG) and server-side rendering (SSR), are supported on a per-page basis.
  支持预呈现，即静态生成 （SSG） 和服务器端呈现 （SSR）。

What are we going to work on?
我们要做什么？

Project 1 – Resource Project
项目 1 – 资源项目

• This project is designed to provide a comprehensive understanding of fundamental concepts in web development.
  该项目旨在提供对 Web 开发基本概念的全面理解。

• You will grasp the concept of state, which represents the dynamic data within a React component, and learn how to manage it effectively.
  您将掌握状态的概念，它表示 React 组件中的动态数据，并学习如何有效地管理它。

• Understanding props, which pass data from one component to another, is a key part of this project.
  理解将数据从一个组件传递到另一个组件的道具是这个项目的关键部分。

• You will understand comprehensively what a component is in the context of React and how to create and use them in your applications.
  您将全面了解 React 上下文中的组件是什么，以及如何在应用程序中创建和使用它们。

• The primary focus is on React and Next JS, two popular JavaScript libraries/frameworks for building modern web applications.
  主要关注 React 和 Next JS，这是两个流行的 JavaScript 库/框架，用于构建现代 Web 应用程序。

Project 2 – Content Application
项目 2 – 内容应用程序

• Learn the latest Next.js 13’s “App Architecture.”
  了解最新的 Next.js 13 的“应用架构”。

• Explore recent changes in React and Next.js.
  探索 React 和 Next.js 的最新变化。

• Build a content application for managing portfolios and blogs in markdown format.
  构建一个内容应用程序，用于以 Markdown 格式管理投资组合和博客。

• Discover new API functions.
  发现新的 API 函数。

• Understand project organization.
  了解项目组织。

• Gain insight into how these frameworks work.
  深入了解这些框架的工作原理。

Project 3 – Extensive Portfolio Project
项目 3 – 广泛的投资组合项目

1. Building the Layout: 构建布局：

   • Creating reusable components like navbar and portfolio cards.
     创建可重用的组件，如导航栏和投资组合卡。

   • Explaining server-side rendering and data fetching techniques.
     解释服务器端渲染和数据获取技术。

2. Authentication: 认证：

   • Using Auth0 for authentication.
     使用 Auth0 进行身份验证。

   • User registration, login, and access control.
     用户注册、登录和访问控制。

   • Managing authentication state and making UI changes.
     管理身份验证状态并进行 UI 更改。

3. Portfolio Features: 产品组合特点：

   • Implementing create, update, and delete functionality.
     实现创建、更新和删除功能。

   • Real-time updates and fast static pages with Next.js.
     具有Next.js的实时更新和快速静态页面。

4. Blogging: 博客：

   • Creating blogs with a rich text editor.
     使用富文本编辑器创建博客。

   • Drafting and publishing blogs.
     起草和发布博客。

   • Managing user blogs and SEO.
     管理用户博客和搜索引擎优化。

5. SEO (Search Engine Optimization):
   SEO（搜索引擎优化）：

   • Basics of SEO and integrating it with Next.js.
     SEO的基础知识并将其与Next.js集成。

6. Deployment: 部署：

   • Deploying Express API server to Heroku.
     将 Express API 服务器部署到 Heroku。

   • Deploying Next.js portfolio app to Vercel to be accessible on the internet.
     将Next.js投资组合应用程序部署到 Vercel，以便在互联网上访问。