Mario Brusarosco

next js

In the ground since Fri Oct 01 2021

Last watered inFri Oct 01 2021

Related Topics

Next JS

Recipes

Go Back Behavior

for client Component

1"use client";
2
3import { useRouter } from "next/navigation";
4import { IconChevron } from "./icons/chevron";
5
6const GoBack = ({ label }: { label?: string }) => {
7  const { back } = useRouter();
8  const handleGoBack = () => back();
9
10  return (
11    <div
12      onClick={handleGoBack}
13      role="button"
14      className="flex gap-x-2 items-center justify-center"
15    >
16      {label ? <span className="uppercase font-sans">{label}</span> : null}
17      <IconChevron className="w-8 md:w-10 stroke-wenge" />
18    </div>
19  );
20};
21
22export { GoBack };

Cons

Working with Framer Motion

We can see lagged animations during development time specially, when using Framer Motion with Next JS. This is because Next JS is server-side rendered and Framer Motion is a client-side library. To fix this we can use the useEffect hook to render the animations only on the client-side.

1import { useEffect } from "react";
2import { motion } from "framer-motion";
3
4const MyComponent = () => {
5  useEffect(() => {
6    const { animate } = require("framer-motion");
7    animate();
8  }, []);
9
10  return (
11    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
12      Hello World
13    </motion.div>
14  );
15};