import { cn } from '@/lib/utils'; import { icons } from 'lucide-react'; const LcIcon = ({ name, color, size, className }: { name: string, color?: string, size: number, className?: string}) => { const LucideIcon = (icons as any)[name]; if(LucideIcon == null) { return ...
const Icons={ home: Home } export default Icons; 使用 import Icons from "@/components/icons" export default function Test() { return ( <Icons.home theme="filled" size="16"/> ) } 安装Lucide npm install lucide 使用装Lucide import {Users, ...
还有,确保你有相应的图标文件在public/icons目录下,不然,到了你安装应用的时候,可能会导致失败,或者说应用没有图标。 如果你是基于其他的项目,比如纯净的手写 html+css,那么,你可能需要生成的Service Worker。但是现在你使用的Next.js,不需要手动去做,因为我们在next.config.js里面已经配置了PWA插件,next-pwa插件会...
Created nextdemo at /home/develop/nodejs/nextjs-demo 注:在 Next.js 13 之前,Pages Router 是在 Next.jsp 中创建路由的主要方式。它使用直观的文件系统路由器将每个文件映射到一个路由。新版本的 Next.js 仍然支持 Pages Router,Next.js 官方建议迁移到新的 App Router,以利用 React 的最新功能。本文主要...
通过Prisma、Postgresql 和 NextAuth 的全栈创建博客应用程序,了解如何使用 Next.js 13 和应用程序目录结构。 Next.js是一个强大而灵活的框架,可用于构建各种各样的 Web 应用程序,从小型个人项目到大型企业应用程序。 本文将使用以下技术构建一个完整的堆栈应用程序: ...
首先我们要引入一个图标组件，在终端命令行中输入 pnpm install @heroicons/react写入代码```tsximport { GlobeAltIcon } from '@heroicons/react/24/outline';import { lusitana } from '@/app/ui/fonts';export default function AcmeLogo() { return (${lusitana.className} flex flex-row items-center...
Creating a new Next.js app in /Users/justinzhang/WorkSpace/com.seaurl/web/next-auth-redux. 2、引入依赖包 添加下面的依赖包: "dependencies": { "@ant-design/nextjs-registry": "^1.0.0", "@ant-design/icons": "^5.3.6", "@reduxjs/toolkit": "^2.2.3", ...
Add Next Video to your Next.js config next.config.js If you're using CommonJS modules: const{withNextVideo}=require('next-video/process');/**@type{import('next').NextConfig} */constnextConfig={};// Your current Next Config objectmodule.exports=withNextVideo(nextConfig); ...
首先我们要引入一个图标组件,在终端命令行中输入pnpm install @heroicons/react 写入代码 import{GlobeAltIcon}from'@heroicons/react/24/outline';import{ lusitana }from'@/app/ui/fonts';exportdefaultfunctionAcmeLogo() {return(<GlobeAltIconclassName="h-12 w-12 rotate-[15deg]"/>Warp Driver Logo); ...
import Link from "next/link";import NavLinks from "@/app/ui/dashboard/nav-links";import AcmeLogo from "@/app/ui/acme-logo";import { HomeIcon } from "@heroicons/react/24/outline";export default function SideNav() { return ( <Link className="mb-2 flex h-20 items-end ju...