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

相关文章

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t