Ankita Kulkarni demonstrates how to implement seamless page transitions in Next.js using Framer Motion and the template.js file convention.
#nextjs #react #javascript
Want to learn how to add captivating transitions to your Next.js app with just one simple step?
Say goodbye to boring page changes and hello to seamless transitions using the power of Framer motion. Watch this video to discover how to enhance user experience and make your app more engaging.
⭐️ Sign up for the Premium Next.js Course Waitlist:
bit.ly/nextjscourse
👉 FREE Next.js Best Practices Course:
bit.ly/nextjshottips
🍿 WATCH NEXT
4 Server Components Gotchas you didn't know in Next.js youtu.be/aO1BCoudW_U
Next.js App vs Pages Router - Which One is Better? youtu.be/fNiLQi1RZrA
⏰ Timeline
- Intro
- What transitions do you need?
- How to add transitions in your Next.js app?
- Code walkthrough
- Where to add transitions in your Next.js app?
- Server Components makes things tricky for transitions
- Limitations of Server and Client components
- Next.js Workshop
- Customizing Transitions
- Framer motion customizations
- Next Steps
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 bit.ly/fesnacks
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.
✨ FREE Goodies: kulkarniankita.com/goodies
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: bit.ly/30mins-coaching-with-ankita
🐤 Connect with me here
Twitter: twitter.com/kulkarniankita9/
LinkedIn: linkedin.com/in/kulkarniankita/
#tailwindcss #framermotion #nextjstransitions
Why it's here
1 person recommends this
What people say. Recommended as a guide for implementing page transitions in Next.js 14 using the template file convention.
A
Adriano Monecchion Stack Overflow • Recommends
On “How to make a page transition with Framer Motion and Next.js 14?”
There's a better approach for framer motion page transitions on Next.js 14, and for this case, the solution would be using its new template.js file, which is explained here under "File conventions" from Nextjs doc (must read).
So, after installing framer-motion we can create our page transition template file:
/app/template.tsx
"use client";
import { motion } from "framer-motion";
export default function Template({
children,
}: {
children: React.ReactNode;
}) {
return (
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ ease: "easeInOut", duration: 0.75 }}
>
{children}
</motion.div>
);
}
Simply place it under /app/ root directory and…
