完整基于项目的教程 - React + Next.js [免费]✨

如果你想通过构建真实项目来学习编程，本教程非常适合你。我们将一起使用 React 和 Next.js 构建一个完整的应用程序（世界排名）。

实时应用程序：https://world-ranks.vercel.app/

📖 您将学到：

• 数据排序、过滤
• 无需任何 CSS 框架的响应式布局
• 暗/亮模式
• 服务器端渲染
• 使用 Vercel 进行部署

🍜 资源：

• 设计：https://bit.ly/3l1aH3D
• 资源：https://bit.ly/36p79SX

• API：https://restcountries.eu/

• 源代码：https://github.com/nghiemthu/world-ranks

✨ 您可以在这里找到教程：

__________ 🔖 教程结构 __________

[00:00] - 简介
[1:37] - 设置 Next.js 项目
[6:00] - 构建布局组件
[10:25] - getStaticProps
[12:30] - 构建输入组件
[18:40] - 构建国家/地区表组件
[27:10] - 按州/省对国家/地区进行排序（值和方向）
[38:47] - 按名称、地区和子地区筛选国家/地区
[41:46] - Next.js 中的动态路由
[43:47] - getServerSideProps（服务器端渲染）
[45:43] - 设置国家/地区页面样式
[1:11:52] - 构建响应式布局
[1:29:51] - 构建暗/亮主题切换器
[1:36:42] - 创建新的 Github 仓库并部署到 Vercel
[1:39:15] - getServerSideProps 和 getStaticProps/getStaticPaths
[1:43:01] — 编码愉快！

__________ 🐣 关于我 __________

• 我是DevChallenges的创始人
• 订阅我的YouTube 频道
• 关注我的推特
• 加入Discord