如何用Next.js搭建全栈前端知识库项目？ 点击关注公众号，技术干货及时送达 最近在做一个全栈项目，前端知识非常琐碎，所以想把前端知识点汇总到一起，无论是以后想查询某个知识点，还是学习到新的知识，都可以快速的查询和记录 全部代码已开源到GitHub；先赞后看，年入百万！ 技术栈使用React的Next.js框架和Tailwind CSS，大纲如下 为什么是Next.js?Next.js是一个基于React的服务端渲染框架。这是一个用于生产环境的 React 框架 ?Next.js 提供了许多优点和功能： 「服务端渲染 (SSR) 和预渲染 (SSG)」 ：Next.js 支持服务端渲染和预渲染，这意味着页面在服务器端生成，而不是在客户端。这有助于提高网页的加载速度和搜索引擎优化（SEO），同时也提供更好的首次渲染体验。 「快速加载时间」：由于 Next.js 支持预渲染和服务端渲染，用户可以更快地看到页面内容，因为大部分工作在服务器端完成，减少了客户端加载所需的时间。 「热模块替换 (HMR)」 ：Next.js 支持热模块替换，这意味着在进行开发时，您可以在保持应用程序运行的同时修改代码，并立即看到变化，无需刷新页面。 「简单的部署」：Next.js 的默认配置使得应用程序的部署非常简单。您可以使用 Vercel、Netlify 等平台将应用程序快速部署到云端，或者将其部署到自己的服务器上。 「丰富的生态系统」：Next.js 是一个非常受欢迎的框架，拥有庞大的社区和丰富的插件，扩展和工具支持。这使得开发人员能够轻松解决常见问题，并快速构建复杂的 web 应用程序。 「自动优化」：Next.js 内置了许多优化功能，包括自动压缩和缓存等，这些功能有助于提高应用程序的性能和用户体验。 「支持多种数据获取方法」：Next.js 提供了多种数据获取方式，如 getServerSideProps 和 getStaticProps，使得获取数据变得简单和灵活。 image.png初始化项目?使用的node版本 是 16.x ?创建项目npxcreate-next-appfrontend-knowledge 没有使用TS，也没有用src目录 image.pngNext的Tailwind CSS内置 postcss、 autoprefixer Tailwind CSS使用教程可以看这篇文章??Tailwind css 在项目中的使用与问题 项目结构目录image.pngapp文件夹用于定义路由，layout.tsx和page.tsx文件。当用户访问应用程序的根目录 /时，访问到的就是 app下的page.jsx.image.png每个文件夹表示一个路由，映射到一个URL pages/api 用于编写next后端接口image.png前端页面app文件路由Next 中 app里的每一个文件就是一个路由 根目录 http://localhost:3000/，对应 app下的page.jsxLayout.jsx 是一个用于组织页面结构和共享组件的重要概念。Layout 可以看作是一个组件包裹器，它包含了页面共享的部分，例如页眉（Header）、页脚（Footer）和导航栏（Navigation）或者 page.jsx；layout.jsx相当于page的布局组件. 前端知识库 无论是首页还是子路由都需要有一个左侧导航栏，所以可以把导航栏放到Layout.jsx页面，page页面会映射到 children 里 import'@/styles/globals.css'; importSlideBarfrom'@/components/SlideBar'; functionRootLayout({children}){ return( htmllang='en' body mainclassName='app' SlideBar/ divclassName='w-fullh-full'{children}/div /main /body /html ) } image.png二级目录 http://localhost:3000/category，对应 app/category下的page.jsx"use client""use client"指令是声明服务器和客户端组件模块图之间边界的约定。 NextJS 13默认情况下，App 文件夹内的 所有组件都是服务器组件。并且 服务器组件 不能使用 「useState、useEffect」 等客户端特性。 'useclient' import{useState,useEffect}from"react"; importImagefrom'next/image'; constHome=()={ return( div h1WelcometoNext.js/h1 pThisisthehomepagecontent./p {/*使用NextImage组件*/} Image src="/path/to/your/image.jpg" alt="Descriptionoftheimage" width={300} height={200} / /div }; exportdefaultHome; 组件引入「引入路由 Link」 importReactfrom'react'; importLinkfrom'next/link'; constHome=()={ return( div h1WelcometoNext.js/h1 pThisisthehomepagecontent./p {/*使用Link组件实现导航链接*/} Linkhref="/category" 跳转路由 /Link /div }; exportdefaultHome; Link 组件使用客户端导航而不是传统的页面刷新。当用户点击链接时，只有目标页面的内容会被加载，而不会重新加载整个应用程序 「Image 图片引入」 在Image组件中，您需要提供以下属性： src：图像的路径。它可以是本地路径或远程 URL。alt：图像的替代文本，用于辅助技术和当图像无法加载时显示。width：图像的宽度，应以像素为单位提供。height：图像的高度，应以像素为单位提供。importReactfrom'react'; importImagefrom'next/image'; constHome=()={ return( div h1WelcometoNext.js/h1 pThisisthehomepagecontent./p {/*使用NextImage组件*/} Image src="/path/to/your/image.jpg" alt="Descriptionoftheimage" width={300} height={200} / /div }; exportdefaultHome; Notion数据库Notion 不仅是一款个人笔记软件，还可以当作数据库使用 Notion在线笔记 可以通过安装 Notion API SDK 来进行连接数据库，获取数据 创建数据库创建一个DATABASE数据库然后再创建各个字段 image.png创建应用集成，获取密钥去Notion创建一个应用集成，获取 API Key??Notion Developers image.png数据库就创建好了，接下来就可以再Next里连接数据库进行获取数据了 连接数据库创建Notion服务安装Notion API 客户端 npminstall@notionhq/client 创建一个 NotionServer 服务，将请求数据库的方法进行封装 lib/NotionServer.js import{Client}from"@notionhq/client"; constauth=process.env.NOTION_AUTH; constdatabase=process.env.NOTION_DATABASE_ID; exportdefaultclassNotionService{ constructor(){ this.client=newClient({auth } asyncquery(){ constresponse=awaitthis.client.databases.query({ database_id:database, returnresponse.results; } } NOTION_AUTH是数据库集成的密钥 NOTION_DATABASE_ID是notion链接上面的 id image.png再新建一个pages/api/question.js路由，调用NotionServer查询服务 importNotionServerfrom"../../lib/NotionServer"; constnotionServer=newNotionServer(); exportdefaultasyncfunctionhandler(req,res){ constdata=awaitnotionServer.query(); res.status(200).json(data); } 在浏览器中输入 localhost:3000/api/question 就可以看到获取的数据，此时数据还比较杂乱，可以处理一下，返回自己想要的数据 image.png展示到前端页面在首页的 page.jsx页面里使用 fetch方法获取数据，前端页面 "useclient"; import{useState,useEffect}from"react"; importQuestionCardfrom"@/components/QuestionCard" functionHome(){ const[questionList,setQuestionList]=useState([]); const[jsList,setJsList]=useState([]); constgetQuestionList=()={ fetch('/api/question') .then((res)=res.json()) .then((res)={ if(res){ setQuestionList(res.sort((a,b)=a.id-b.id)); } }) .catch((error)={ console.error(error); useEffect(()={ getQuestionList(); }, useEffect(()={ constjsItems=questionList.filter(item=item.tags==="JavaScript"); setJsList(jsItems); },[questionList]); return( divclassName="w-fullh-fulloverflow-auto" sectionclassName="gap-4p-6space-y-4md:columns-2" QuestionCardquestionList={jsList}type="JavaScript"/ /section /div ) } exportdefaultHome image.pngMarkdown数据渲染数据存储采用的是Markdown格式，所以就需要第三方的Markdown插件进行展示 markdown-it 数据展示安装 markdown-it npminstallmarkdown-it 'useclient' import{useState,useEffect}from'react' //1.引入markdown-it库 importmarkdownItfrom'markdown-it' //2.生成实例对象 constmd=newmarkdownIt(); functionDialogCard({data,closeDialog}){ const[htmlString,setHtmlString]=useState('')//存储解析后的html字符串 //3.解析markdown语法 constparse=(data)=setHtmlString(md.render(data.explanation)); useEffect(()={ parse(data) },[]) return( divclassName='showw-fullmt-1flex-growoverflow-auto' div className='w-full' dangerouslySetInnerHTML={{__html:htmlString}}//将html字符串解析成真正的html标签 / /div ) } exportdefaultDialogCard Tailwind css 默认将所有的 h1-h6和ul,li 基础样式重写，所以markdown展示的样式和普通文本没有区别 官方的Tailwind CSS Typgraphy插件提供了一组prose类，可以使用它们为任何不受控制的「普通HTML」添加漂亮的排版默认值，「例如从Markdown呈现的HTML或从CMS中提取的HTML。」 安装： npminstall-D@tailwindcss/typography 然后将插件添加到tailwind.config.js文件中： /**@type{import('tailwindcss').Config}*/ module.exports={ plugins:[ require("@tailwindcss/typography") ], } 最后在 div 添加prose类 divclassName='prosew-full' dangerouslySetInnerHTML={{__html:htmlString}}//将html字符串解析成真正的html标签 / image.png代码高亮markdown-it 默认的代码块格式没有样式，可以安装highlight 插件进行添加代码块样式 npminstallhighlight.js 然后引入样式文件,在生成实例时，进行初始化 importhljsfrom"highlight.js"; import'highlight.js/styles/monokai-sublime.css' //2.生成实例对象 constmd=newmarkdownIt({ highlight:function(str,lang){ if(langhljs.getLanguage(lang)){ try{ returnhljs.highlight(str,{language:lang}).value; }catch(_){} } return"";//使用额外的默认转义 }, }); image.png写到这里项目也算是完成了，源码放到了GitHub上????????frontend-konwledge 欢迎大家 star?????? 部署到Vercel使用github账号登录到 Vercel 上 找到项目，选择导入 image.png添加环境变量名和值，相当于.env里的值 部署成功后就可以访问了 更新新代码时，不用再次部署，它会自动更新到最新代码。只不过国内访问可能会被??墙 在线预览地址?? 前端知识点 (frontend-konwledge.vercel.app) 最后本文只介绍了项目中使用到的Next技巧，和其他的一些使用教程 像一些SSR，动态路由，元数据等使用方式，准备在项目优化时配合着真实的案例再记录 ?Tailwind css教程可以看这篇文章??Tailwind css 在项目中的使用与问题 项目源码放到了GitHub上????????frontend-konwledge 在线预览地址?? 前端知识点 (frontend-konwledge.vercel.app) ?如果文章对你有帮助的话欢迎 「关注+点赞+收藏」 阅读原文