这门课要解决什么问题

这门课要解决的问题是：如何用Next.js和Fabric.js从零搭建一个图形设计编辑器——有可拖拽画布、响应式布局、左侧工具栏、颜色填充等基础功能，能做出类似Canva的简单设计工具。课程不追求复杂商业产品，而是聚焦编辑器核心逻辑，让你真正理解“一个在线设计编辑器是怎么被搭出来的”。

适合什么基础

适合有一定前端基础的自学者，最好熟悉HTML/CSS/JavaScript基础概念，了解React/Next.js的基本用法。如果完全没接触过Next.js，建议先花几天时间看相关入门资料再回来这门课。课程节奏偏慢，每块内容会讲清楚为什么这么做，所以即使基础不厚，跟着走也能跟上。

建议先看哪几块

  • 先过Intro和Setup两讲，了解整体结构，学会初始化项目环境。
  • 重点看Basics of Next.js，这是后续所有内容的基础，理解页面路由、组件、状态管理这些核心概念。
  • 然后进入Setting up Fabric.js和Responsive Canvas这两讲，这是编辑器的核心，需要动手跟着画。
  • 剩下的Editor Layout、Navbar、Active Tool、Shape Sidebar、Shape Tool、Fill Color Tool等属于界面细节，顺序可以灵活调整，但建议按资料包顺序走，逻辑更清晰。

学完能独立做什么

学完能独立搭建一个包含基本功能的在线设计编辑器：有响应式画布、可拖拽元素、左侧形状工具栏、颜色填充工具、顶部导航栏等。虽然界面可能不会像Canva那么精致，但核心交互逻辑都能实现，能独立完成一个简单设计工具的MVP（最小可行产品）。

资料怎么配合练习

资料包里的视频配合练习材料使用。建议每看完一个模块就动手跟着敲代码，特别是Fabric.js的初始化、Canvas的响应式处理这些核心部分，光看不练容易卡在概念理解上。资料包里可能还有配套的代码示例或练习题，遇到不懂的再回头看视频，形成“看→练→卡住→再看”的节奏。如果某个模块实在学不会，可以跳过，等学完基础后再回来补，不必强求每个细节都搞懂。

课程目录

01. Intro.mp4
01. Intro.srt
01. Intro.vtt
02. Setup.mp4
02. Setup.srt
02. Setup.vtt
03. Basics of Next.js.mp4
03. Basics of Next.js.srt
03. Basics of Next.js.vtt
04. Setting up Fabric.js.mp4
04. Setting up Fabric.js.srt
04. Setting up Fabric.js.vtt
05. Responsive Canvas.mp4
05. Responsive Canvas.srt
05. Responsive Canvas.vtt
06. Editor Layout.mp4
06. Editor Layout.srt
06. Editor Layout.vtt
07. Editor Navbar.mp4
07. Editor Navbar.srt
07. Editor Navbar.vtt
08. Editor Active Tool.mp4
08. Editor Active Tool.srt
08. Editor Active Tool.vtt
09. Editor Shape Sidebar.mp4
09. Editor Shape Sidebar.srt
09. Editor Shape Sidebar.vtt
10. Editor Shape Tool.mp4
10. Editor Shape Tool.srt
10. Editor Shape Tool.vtt
11. Editor Fill Color Tool.mp4
11. Editor Fill Color Tool.srt
11. Editor Fill Color Tool.vtt
12. Editor Stroke Color Tool.mp4
12. Editor Stroke Color Tool.srt
12. Editor Stroke Color Tool.vtt
13. Editor Stroke Width Tool.mp4
13. Editor Stroke Width Tool.srt
13. Editor Stroke Width Tool.vtt
14. Editor Layering.mp4
14. Editor Layering.srt
14. Editor Layering.vtt
15. Editor Opacity Tool.mp4
15. Editor Opacity Tool.srt
15. Editor Opacity Tool.vtt
16. Editor Text Sidebar.mp4
16. Editor Text Sidebar.srt
16. Editor Text Sidebar.vtt
17. Editor Font Family Tool.mp4
17. Editor Font Family Tool.srt
17. Editor Font Family Tool.vtt
18. Editor Font Style Tools.mp4
18. Editor Font Style Tools.srt
18. Editor Font Style Tools.vtt
19. Editor Font Size Tool.mp4
19. Editor Font Size Tool.srt
19. Editor Font Size Tool.vtt
20. Editor Delete Tool.mp4
20. Editor Delete Tool.srt
20. Editor Delete Tool.vtt
21. Basics of Hono.mp4
21. Basics of Hono.srt
21. Basics of Hono.vtt
22. Editor Image Sidebar.mp4
22. Editor Image Sidebar.srt
22. Editor Image Sidebar.vtt
23. Editor File Upload.mp4
23. Editor File Upload.srt
23. Editor File Upload.vtt
24. Editor Image Filter Tool.mp4
24. Editor Image Filter Tool.srt
24. Editor Image Filter Tool.vtt
25. AI Image Generation.mp4
25. AI Image Generation.srt
25. AI Image Generation.vtt
26. AI Background Removal.mp4
26. AI Background Removal.srt
26. AI Background Removal.vtt
27. Clipboard (Copy & Paste).mp4
27. Clipboard (Copy & Paste).srt
27. Clipboard (Copy & Paste).vtt
28. Drawing Tool.mp4
28. Drawing Tool.srt
28. Drawing Tool.vtt
29. Canvas Settings.mp4
29. Canvas Settings.srt
29. Canvas Settings.vtt
30. Zoom Tool.mp4
30. Zoom Tool.srt
30. Zoom Tool.vtt
31. History (Undo & Redo).mp4
31. History (Undo & Redo).srt
31. History (Undo & Redo).vtt
32. Hotkeys & Shortcuts.mp4
32. Hotkeys & Shortcuts.srt
32. Hotkeys & Shortcuts.vtt
33. Export & Import.mp4
33. Export & Import.srt
33. Export & Import.vtt
34. Basics of Auth.js.mp4
34. Basics of Auth.js.srt
34. Basics of Auth.js.vtt
35. Database & Drizzle Setup.mp4
35. Database & Drizzle Setup.srt
35. Database & Drizzle Setup.vtt
36. Custom Auth Pages.mp4
36. Custom Auth Pages.srt
36. Custom Auth Pages.vtt
37. Google Login.mp4
37. Google Login.srt
37. Google Login.vtt
38. Credentials Login.mp4
38. Credentials Login.srt
38. Credentials Login.vtt
39. Auth.js & Hono.mp4
39. Auth.js & Hono.srt
39. Auth.js & Hono.vtt
40. Session Provider & User Button.mp4
40. Session Provider & User Button.srt
40. Session Provider & User Button.vtt
41. Home Page & Layout.mp4
41. Home Page & Layout.srt
41. Home Page & Layout.vtt
42. Projects Schema & API.mp4
42. Projects Schema & API.srt
42. Projects Schema & API.vtt
43. Fetch Existing Project.mp4
43. Fetch Existing Project.srt
43. Fetch Existing Project.vtt
44. Autosave Feature.mp4
44. Autosave Feature.srt
44. Autosave Feature.vtt
45. Projects Infinite Load.mp4
45. Projects Infinite Load.srt
45. Projects Infinite Load.vtt
46. Duplicate a Project Feature.mp4
46. Duplicate a Project Feature.srt
46. Duplicate a Project Feature.vtt
47. Delete a Project Feature.mp4
47. Delete a Project Feature.srt
47. Delete a Project Feature.vtt
48. Templates Feature.mp4
48. Templates Feature.srt
48. Templates Feature.vtt
49. Templates Sidebar.mp4
49. Templates Sidebar.srt
49. Templates Sidebar.vtt
50. Subscriptions UI.mp4
50. Subscriptions UI.srt
50. Subscriptions UI.vtt
51. Subscriptions API.mp4
51. Subscriptions API.srt
51. Subscriptions API.vtt
52. Deployment on Vercel.mp4
52. Deployment on Vercel.srt
52. Deployment on Vercel.vtt
Build a Canva clone.txt
code.zip