Next.js智慧笔记项目启航： 明确项目目的， 路由搭建， 大致的界面实现

项目目的：

1.在实战中体会 React Server Component 的特性和优势

2.为了应付面向对象课程

3.探索ai与前端项目结合的实践

计划是先完成目的1再对项目进行迭代，目的一创作的的具体细节见冴羽大佬的小册， 本项目就是在冴羽大佬的项目上进行迭代的

路由搭建（初版）：

1. 首页肯定是 /，点击左上角的 React Note Logo 会导航至首页 /
2. 点击左侧笔记列表中的一项，导航至 /note/xxxx路由，渲染具体笔记内容
3. 当点击 NEW 按钮的时候导航到 /note/edit路由上，点击 Done导航至刚创建的 /note/xxxx路由
4. 导航至 /note/xxxx后，点击 EDIT 按钮，进入 /note/edit/xxxx 路由，点击 Done导航至刚修改的 /note/xxxx路由，点击 DELETE 导航至首页 /
5. 当在左侧搜索框输入字符的时候，对应路由添加 ?q=searchText 参数

next-react-notes                 
├─ app                                     
│  ├─ note                       
│  │  ├─ [id]                         
│  │  │  └─ page.js              
│  │  └─ edit                    
│  │     ├─ [id]                 
│  │     │  └─ page.js              
│  │     └─ page.js                        
│  ├─ layout.js                  
│  └─ page.js                                

下面是界面搭建

左侧是 <Sidebar> 组件，子组件中有：

1. <SidebarSearchField> 组件负责搜索框

2. <EditButton> 组件负责添加按钮

3. <SidebarNoteList> 组件负责笔记列表

   1. 再拆分为具体的 <SidebarNoteItem> 组件负责每一条具体的笔记内容

右侧是 <Note> 组件，子组件有：

1. <EditButton> 组件负责编辑按钮
2. <NoteEditor> 组件负责笔记的编辑界面
3. <NotePreview> 组件负责笔记的预览界面

发现创建完项目之后出现这个报错

next.js - 解析错误 : Cannot find module 'next/babel'

解决方案：next.js - 解析错误 : Cannot find module 'next/babel' - IT…

还有原教程中这里有问题

少了baseURL