[nextjs]推荐几个很好看的模板网站

最新推荐文章于 2024-06-15 21:02:55 发布
最新推荐文章于 2024-06-15 21:02:55 发布
阅读量563 收藏 3
点赞数 8
文章标签： 网站搭建
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zll_0405/article/details/139265970
版权

最近在做网站,折腾了 vue 框架,然后发现了 nextjs 框架,感觉这个做出来的网站配色很好看,然后又开始研究这个
网站配色好看是因为用的 tailwindcss,找网站过程中,发现了几个很好看的模板网站,在这里推荐下,或许你也能用得上

推荐第一个网站是: https://tailspark.co/
有组件,也有模板,有免费的,也有付费的
可以不用登录就 copy 喜欢的
在这里插入图片描述
比如 faq 这个版块下,免费的模板直接 copy 即可, react/vue/html 都支持,如果你也是 nextjs 的话,copy react 代码就可以
在这里插入图片描述
推荐第二个网站是: https://www.hyperui.dev/
这个是 tailwind UI 组件库开源站,里面也有很多 components 很好看
比如 card 分类下的这个 demo,就在我的点上 🤣
可以直接 copy html,很方便
在这里插入图片描述
推荐第三个网站是 https://statichunt.com/
这里面有免费的,也有付费的模板
有 nextjs,也有 astro 等等,还是挺多的
在这里插入图片描述
目前用的最顺手的就是这三个网站,后面如果有更好的网站了,就再来补充

by the way, 推荐下我的个人导航站: navbar.click
有什么好玩的网站,我都会把它放上去的,欢迎收藏,持续关注
在这里插入图片描述

以上,感谢您的阅读

Developer.lulu
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nextjs-模板
02-27
使用next.js的JAMstack网站的全功能模板 只需在Vercel上单击几下，即可部署您自己的项目副本： 关于 我使用我发现对开发自己的个人项目有用的所有工具构建了该模板，因此可能会有偏差。 如果发现您认为不相关或可以...
nextjs-template:Next.js项目模板
03-06
在Next.js项目中，有几个核心概念和技术值得深入理解： 1. **自动代码分割**：Next.js 自动处理代码分割，将应用拆分为多个小块，只在需要时加载，从而提高页面加载速度。 2. **预渲染（Static Generation, SSG）*...
我用 Nextjs 十分钟搭建了一个展示955公司网站
weixin_43303603的博客
03-23 1025
打工人终极梦想就是能够 955 吧！一年之前看到过955公司名单，最近偶然又看到一篇955不加班的公司名单推文，发现名单上的公司大都是外企，而且相比一年之前又少了几个。于是想.....
老胡的周刊（第112期）
howie6879's blog
10-23 197
老胡的信息周刊[1]，记录这周我看到的有价值的信息，主要针对计算机领域，内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。???? 项目LocalAI[2]???? 免费、开源的 OpenAI 替代品。自托管、社区驱动和本地优先。可在消费级硬件上运行，作为 OpenAI 的即插即用替代方案。无需 GPU。支持运行 ggml、gguf、GPTQ、onnx 和 TF ...
推荐一个强大的Next.js启动模板：nextjs-starter
gitblog_00002的博客
05-22 311
推荐一个强大的Next.js启动模板：nextjs-starter 项目地址:https://gitcode.com/pbteja1998/nextjs-starter 如果你正在寻找一个集成了最新技术和全面功能的Next.js开发起点，那么这个项目将会是你的理想之选。【nextjs-starter】是一个精心设计的模板，结合了React 17、Typescript、Tailwind CSS 2、...
推荐：Materio - 强大的免费MUI React NextJS管理模板
gitblog_00056的博客
05-15 315
推荐：Materio - 强大的免费MUI React NextJS管理模板 materio-mui-react-nextjs-admin-template-freeMaterio is the Most Powerful & Comprehensive free Next.js React admin template based on MUI !! ????项目地址:https://gitcode...
NextJs 初级篇 - 安装 | 路由 | 中间件
Zong_0915的博客
05-26 1531
我们这里主要讲官方更推荐的AppRouter，如图：我们约定使用page来代表一个页面index。和React一样，默认导出个组件即可。文件的路径就是对应的路由。对应路由对应路由/about对应路由/addresslayout的固定文件，该组件接收一个children，代表子页面或者子布局。布局可以嵌套，父布局中有一个子布局。定义在文件中，会应用于所有的路由。并且此文件必须存在。根布局文件中必须包含html和body标签。同时其他布局不能包含这些标签。children,
推荐开源项目：Tailnext - NextJS与Tailwind CSS的完美结合
gitblog_00065的博客
06-01 366
推荐开源项目：Tailnext - NextJS与Tailwind CSS的完美结合 项目地址:https://gitcode.com/onwidget/tailnext 项目介绍 Tailnext，一个免费且开源的模板，旨在帮助您轻松地使用NextJS和Tailwind CSS构建您的网站。这个模板设计时考虑了最佳实践，确保您的网站不仅美观，而且功能强大、性能优异。 项目技术分析 Tailnex...
推荐使用Notus NextJS：打造你的高效前端开发平台
gitblog_00034的博客
05-14 295
推荐使用Notus NextJS：打造你的高效前端开发平台 项目地址:https://gitcode.com/creativetimofficial/notus-nextjs 1、项目简介 Notus NextJS是一款精美且功能强大的免费UI工具包和管理界面模板，基于Tailwind CSS和NextJS构建。这个框架以其鲜明的色彩设计和丰富的组件库，帮助开发者快速启动并提升项目的整体水平。 ...
NextJS基础教程
2401_85124621的博客
06-15 700
在编写代码之前，先删除index.js中的代码，保证代码的最小化。使用标签式导航需要先进行引入，代码如下:然后新建两个页面kaiA.js和kaiB.js，新建后写个最简单的页面，能标识出来A、B两个页面就好。// kaiAKaiA page写完A页面后，可以直接复制A页面的内容，然后修改一下就是B页面。// kaiBKaiB page有了两个页面后，可以编写首页的代码，实现跳转了。我是首页用
nextjs-tailwindcss-typescript-starter:NextJS、TailwindCSS 和 Typescript 入门模板
05-30
如何使用这个模板以下是使用此模板创建新项目的几种方法。使用create-next-app 使用从模板创建一个新的 next.js 应用 npx create-next-app --example ...
agilitycms-nextjs-starter-2020:一个使用Agility CMS，Tailwinds CSS和几个预建组件的NextJS入门网站
05-06
提供一种功能结构，该结构可根据请求动态路由每个页面，动态加载页面模板，以及动态加载和呈现适当的Agility CMS模块（作为React组件） 基于Treact组件 本网站使用从库获得许可的。 有超过50个使用TailwindCSS轻松...
latihan-next-crud:使用NextJs和Mongoose进行全栈测试
05-23
【描述】项目涉及了几个关键的技术和进步阶段： 1. **Next.js**：这是一个用于构建服务器渲染（SSR）和静态生成（SSG）的React框架。Next.js提供了开箱即用的功能，如自动代码分割、热模块替换、路由等，使得开发...
原创二胡音色源文件，可以让热爱电子乐喜欢做MIDI音乐的朋友，做参考音源
08-14
原创二胡音色源文件，可以让热爱电子乐喜欢做MIDI音乐的朋友，做参考音源。这里开源给大家，希望能帮助到您
基于Android人脸识别设计与实现.docx
最新发布
08-14
基于Android人脸识别设计与实现.docx
长虹大清快系列空调电路原理图 (2).rar
08-14
长虹大清快系列空调电路原理图 (2)
课程设计项目，利用阴影图的思想实现三维可视域分析+高分项目+源码.zip
08-14
课程设计项目，利用阴影图的思想实现三维可视域分析+高分项目+源码.zip 个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导并认可通过的高分项目，评审分98分。主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业。个人经导师指导
使用nextjs和typescript写一个web搜索过滤器
06-09
好的，下面是一个基于 Next.js 和 TypeScript 的简单搜索过滤器的示例代码： 首先，我们需要安装必要的依赖： ```bash npm install next react react-dom typescript @types/react @types/node ``` 然后在根目录下创建一个 `pages` 文件夹，在其中创建一个名为 `index.tsx` 的文件，作为我们的搜索页面： ```tsx import React, { useState } from 'react'; interface SearchResult { title: string; description: string; } const searchResults: SearchResult[] = [ { title: 'Next.js', description: 'The React Framework for Production', }, { title: 'TypeScript', description: 'Typed JavaScript at Any Scale.', }, { title: 'React', description: 'A JavaScript library for building user interfaces.', }, ]; const IndexPage: React.FC = () => { const [query, setQuery] = useState(''); const [results, setResults] = useState<SearchResult[]>([]); const handleSearch = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const filteredResults = searchResults.filter( (result) => result.title.toLowerCase().includes(query.toLowerCase()) || result.description.toLowerCase().includes(query.toLowerCase()) ); setResults(filteredResults); }; return ( <div> <form onSubmit={handleSearch}> <input type="text" placeholder="Search" value={query} onChange={(event) => setQuery(event.target.value)} /> <button type="submit">Search</button> </form> {results.length > 0 ? ( <ul> {results.map((result, index) => ( <li key={index}> <h2>{result.title}</h2> <p>{result.description}</p> </li> ))} </ul> ) : ( <p>No results found.</p> )} </div> ); }; export default IndexPage; ``` 在上面的示例代码中，我们定义了一个 `SearchResult` 接口，它包含 `title` 和 `description` 两个属性。然后我们创建了一个包含几个示例搜索结果的数组 `searchResults`。 在组件的状态中，我们使用 `useState` 钩子定义了两个状态变量：`query` 和 `results`。`query` 存储用户的搜索查询，`results` 存储过滤后的搜索结果。 在 `handleSearch` 函数中，我们使用数组的 `filter` 方法来过滤搜索结果，并将过滤后的结果存储在 `results` 状态变量中。 最后，在组件的渲染中，我们使用一个表单和一个输入框来获取用户的搜索查询。当用户提交查询时，我们调用 `handleSearch` 函数来更新搜索结果列表的内容。如果没有搜索结果，则显示一个简单的文本消息。 希望这个示例代码能够帮助您开始编写自己的基于 Next.js 和 TypeScript 的搜索过滤器！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值