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

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

Java异常架构Exception(异常)详解

《Java异常架构Exception(异常)详解》:本文主要介绍Java异常架构Exception(异常),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. Exception 类的概述Exception的分类2. 受检异常(Checked Exception)

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

一文教你Python引入其他文件夹下的.py文件

《一文教你Python引入其他文件夹下的.py文件》这篇文章主要为大家详细介绍了如何在Python中引入其他文件夹里的.py文件,并探讨几种常见的实现方式,有需要的小伙伴可以根据需求进行选择... 目录1. 使用sys.path动态添加路径2. 使用相对导入(适用于包结构)3. 使用pythonPATH环境

Python中ModuleNotFoundError: No module named ‘timm’的错误解决

《Python中ModuleNotFoundError:Nomodulenamed‘timm’的错误解决》本文主要介绍了Python中ModuleNotFoundError:Nomodulen... 目录一、引言二、错误原因分析三、解决办法1.安装timm模块2. 检查python环境3. 解决安装路径问题

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错