Build Modern Next 14 Server Side App with Server

🌟 Become a top 1% Next.js 14 developer in only one course: https://jsmastery.pro/next14

I think the best backend framework is django, .NET and Java Spring Boot

13:08 for me Tailwind Fold 😃

37:55 Isn't this a bug? Thumbnails in the two loaded lines will be fadeIn, but opacity starts from 1 in the third line

what's the font and color theme of your vs code?

Live Long Brother.

prefer like this, under 1 hours, easy to understand, love it ❤❤❤❤

Pls tell ur vscode theme looks so good

Awesome video. Yes Please make more content of this type which focuses on a single specific feature. it helps to get more in-depth knowledge of that topic. Thank you so much

@Adrian, if you can also come up some basic concept course on Figma design. Around 1 to 2 hours course.

Hi Thanks for the video !
Info for motion:
To have a server component inside the client component you need to use children props. Something like that:
"use client";

import React from "react";

import { motion } from "framer-motion";

type Props = {

children: React.ReactNode;

className?: string;

};

const variants = {

hidden: { opacity: 0, y: -50 },

visible: {

opacity: 1,

y: 0

},

};

export const MotionDiv = ({ children, className }: Props) => {

return (

<motion.div

variants={variants}

initial="hidden"

animate="visible"

className={className}

>

{children}

</motion.div>

);

};

export default MotionDiv;

//export const MotionDiv = motion.div;

What vscode theme u using?

Great video 🎉

here is the simple code for framer motion,

just add this in your map
const adjustedIndex = index % 20;

– the number 20 is limit data perpage

so you dont need to move the map into actions file

for example, in loadmore component

data.map((series: SeriesCard, index) => {

const adjustedIndex = index % 20;

return (

<MotionDiv

key={series.id}

variants={variants}

initial='hidden'

animate='visible'

transition={{

delay: adjustedIndex * 0.1,

ease: 'easeInOut',

duration: 0.3,

}}

viewport={{ amount: 0 }}

>

<CardMovies data={series} imgWidth={185} />

</MotionDiv>

);

})

sorry my english is bad

amazing job!

nobody makes me feel motivated to code than this guy on the leadup to the coding, well done

Your content is very nice , interesting And I love it very much❤️❤️
I would like it if you could create courses in Angular or projects using it🙏❤️

I'm following this channel for a year but never completed any single project as mostly get stuck.

but this project completing after Next js also did in react js .

perfect as always….

thank you sir for little project and with greate explanation of cocepts. Sir I have request can you clone apple website with it's all animation in react.js and node.js.

Yes , pls do more of these videos

really helpful!! please do make this types of videos

I dont understand Only first page that loaded with 8 images is server side rendered other images loaded after scrolling are loaded client side so what the use of the server side render function only for the initial page

Great video! I really enjoyed the content. Your VS Code setup looks fantastic! Could you please share the font and theme you're using? I'm looking to improve my coding environment, and your setup caught my eye. Thanks in advance, and keep up the excellent work !

Which is good

Strapi or sanity