Next.js 14 App Router引入 farmer-motion 初始化异常解决,顺带学点知识

本文主要是介绍Next.js 14 App Router引入 farmer-motion 初始化异常解决,顺带学点知识,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

farmer-motion 是一个非常好用的动画库,当然用来做组件切换和路由切换过渡更不在话下。

记录一下,Next.js 14 App Router 下引入初始化异常的解决姿势,顺带扯一下 next.js 的知识点;

问题

过渡组件代码

我们拿 farmer-motion 搞一个例子来做演示, 初始化从 X 轴方向右边偏移进来,渐隐渐现的方式。

// SlideLeftTransitionWrapper.tsx
import { motion } from "framer-motion";export default function Transition({children,
}: {children: React.ReactNode;
}) {return (<motion.divinitial={{ x: 50, opacity: 0 }}animate={{ x: 0, opacity: 1 }}transition={{ ease: "easeInOut", duration: 0.75 }}>{children}</motion.div>);
}

渲染异常演示

理解及解决

Next.js 路由模式模式简单介绍

next.js 提供了两种路由方式,这里大体点一下,具体可以看官网更加详细

  • Pages Router

    • 定义页面层级路由
    • 所有组件 React Client Component(客户端组件)
    • 只能使用 Next.js 提供的预设规则,例如:文件夹名字即为路径
  • App Router

    • 定义应用程式层级的路由
    • 所有组件预设为 React Server Component(服务层组件)
    • 可自定义路由规则,比如使用正则表达式去匹配特定路径

为什么会渲染异常?

首先 farmer-motion 这个 npm 库,翻源码便可以看到大量能力的实现是依赖浏览器客户端 API 特性;

https://github.com/framer/motion/blob/main/packages/framer-motion/src/dom-entry.ts

其次上面说到了 App Router 默认是服务层组件优先!点到这个就基本知道问题所在了。

在 App Router 中,NextJS 将会区分 Client Components和 Server Components, Server Components 是一种特殊的 React 组件,它不是在浏览器端运行,而是只能在服务器端运行。又因为它们没有状态,所以不能使用只存在于客户端的特性(也就是说 useStateuseEffect 那些都是用不了的,包括 window 对象这些),所以一般我们可以用于获取数据,或者对非客户端组件进行渲染。

你客户端的组件在 Server Components 里面去渲染,不做一点点处理,肯定执行异常!

一点点处理之前的预备知识

那就是 next.js 既然是支持 SSG,SSR 混合式开发的框架。肯定要考虑这类的场景。

他们官方提供了两个特殊的指令: use clientuse server,

这两个指令是什么用呢?
简单粗暴的理解就是告诉框架,我当前这个组件适用于什么场景下渲染;

比如用了 use client, 代表我该组件只在客户端渲染, 拿一个他们文档的例子来说,

比如我们要用到 react 的 useEffectuseStateonClick特性!!

'use client'import { useState } from 'react'export default function Counter() {const [count, setCount] = useState(0)return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>)
}

next.js 这两个指令相关介绍可以这两个文档

  • https://nextjs.org/docs/app/building-your-application/rendering/client-components
  • https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

这两个指令虽然是 next.js 团队提出来并用在了框架里面,
但是很大概率会整到 React 19 里面去。
因为 React 官方文档提供了这两个 API 的说明,并标记为实验性特性!

  • https://react.dev/reference/react/use-client
  • https://react.dev/reference/react/use-server

修正执行

代码修正
"use client";
import { motion } from "framer-motion";export default function Transition({children,
}: {children: React.ReactNode;
}) {return (<motion.divinitial={{ x: 50, opacity: 0 }}animate={{ x: 0, opacity: 1 }}transition={{ ease: "easeInOut", duration: 0.75 }}>{children}</motion.div>);
}

还能再抽象一点,比如我们取个名字, MotionElement.tsx

"use client"import { motion } from "framer-motion";export const MotionDiv = motion.div;
export const MotionSpan = motion.span;
// ts 推断依旧是保留的
运行效果图

请添加图片描述

总结

最常见的的组件和路由过渡可以看这块(farmer-motion):

  • Farmer-motion: transition
  • Farmer-motion: component

写法上,跟styled-components 好像;

有不对之处请留言,会及时修正,谢谢阅读。

这篇关于Next.js 14 App Router引入 farmer-motion 初始化异常解决,顺带学点知识的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/915073

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

sqlite3 相关知识

WAL 模式 VS 回滚模式 特性WAL 模式回滚模式(Rollback Journal)定义使用写前日志来记录变更。使用回滚日志来记录事务的所有修改。特点更高的并发性和性能;支持多读者和单写者。支持安全的事务回滚,但并发性较低。性能写入性能更好,尤其是读多写少的场景。写操作会造成较大的性能开销,尤其是在事务开始时。写入流程数据首先写入 WAL 文件,然后才从 WAL 刷新到主数据库。数据在开始

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

如何解决线上平台抽佣高 线下门店客流少的痛点!

目前,许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流,但其费用昂贵。鉴于此,众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台,但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下,商家之间的合作网络逐渐成为一种有效的解决方案,通过资源和客户基础的共享,实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例,该平台融合了环保消费积分系统,在短

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中,我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试,如何有效地规划和启动测试,如何评估测试是否成功,您应该关注哪些指标,多年来我们发现的常见错误等等。 什么是A/B测试? A/B测试(有时称为“分割测试”)是一种实验类型,其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体,以查看哪一种效果最好。 本质上,A/B测

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件