使用Nextjs的Github包搜索应

北京中科医院是怎么样 http://nb.ifeng.com/a/20180419/6515562_0.shtml
作为开发的一部分，我们每天使用google在Github中搜索开源包。这将是一个耗时的过程，因为我们需要搜索关键字，进入每个Github存储库以检查以下项目以选择包：更改它或用于商业应用程序是完全开源的吗？是没有存档还是有一些活跃的社区在为它工作？它有很多问题吗？此存储库中使用的语言是什么？包的大小是多少，所以它不会使我的项目变得更笨重？最近的更新是什么时候发生的？我想开发一个简单的搜索应用程序，我们可以在其中一次性获得选择包所需的所有信息。它还将帮助任何开发团队作为选择Github包的便捷工具。Github提供了一个搜索API来搜索存储库中的搜索词，并为每个存储库获取详细信息，例如分支、标签和贡献者，并将其显示为单个视图。我们选择Next.js，因此我们可以在后端搜索并仅在客户端呈现内容。它提供了一个免费的部署工具来进行部署，并且可以公开使用。Next.js的领导者Next.js是react.js框架的服务端渲染，它支持我们创建单页Web应用程序。它拥有开发生产就绪型Web应用程序所需的一切——生产型SSRWebUI应用程序：混合静态和服务器渲染、TypeScript支持、智能捆绑、路由预取等。要了解有关Next.js的更多信息，请查看其官方网站。项目设置先决条件是拥有node.js12.2.0或更高版本。我们可以通过一个简单的命令创建下一个支持TypeScript的应用程序：npxcreate-next-app

latest--ts要开始现有项目，请在根文件夹中创建一个空的tsconfig.json文件：touchtsconfig.json项目启动然后，运行next（通常是npmrundev或yarndev），Next.js将引导您安装所需的包以完成设置：npmrundev安装ChakraUI我使用ChakraUI来准备更快地使用组件来构建UI。它提供了Box和Stack布局组件，通过props可以很容易地为你的组件设置样式。npmi

chakra-ui/react

emotion/react

^11

emotion/styled

^11framer-motion

^6搜索应用：目的是提供搜索关键字并获取Github中可用的存储库列表，其中包含所有基本信息，如下所示：搜索Github存储库Next.js应用程序以index.tsx页面开头。在那里，我创建了服务器端props函数，该函数将负责在页面到达客户端之前服务器调用以获取页面的数据。在这个函数中，我们使用了Github搜索存储库API。在UI中提供搜索文本，并将响应与所需信息一起提取到repoItem模型中。exportconstgetServerSideProps=async({query,}:GetServerSidePropsContextQueryParams):PromiseGetStaticPropsResultContentPageProps={console.log("context.query:",query);if(!query

!query?.q){return{props:{repos:[],searchText:"",count:0}};}constsearchText:string=`{query.q}`;consturl=`

转载请注明：http://www.aierlanlan.com/rzfs/8681.html