Best practices for reusable components in Next.js 15
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I want to create reusable components, such as a simple Hero section. I want to use this Hero component on every page but with a different URL for the image. What is the best way to implement this in Next.js 15? I already have a way of doing this, but I was unsure if it was the right and most efficient approach.
The component:
// Component/Hero.tsx
import React from "react";
type HeroProps = {
imageUrl: string;
};
const Hero: React.FC<HeroProps> = ({ imageUrl }) => {
return (
<section>
<img src={imageUrl} alt="Hero image" />
</section>
);
};
export default Hero;
Implementation:
home/page.tsx
import React from "react";
import Hero from "../components/Hero";
const HomePage: React.FC = () => {
return (
<div>
<Hero imageUrl="path/to/image.png" />
</div>
);
};
export default HomePage;
The component:
// Component/Hero.tsx
import React from "react";
type HeroProps = {
imageUrl: string;
};
const Hero: React.FC<HeroProps> = ({ imageUrl }) => {
return (
<section>
<img src={imageUrl} alt="Hero image" />
</section>
);
};
export default Hero;
Implementation:
home/page.tsx
import React from "react";
import Hero from "../components/Hero";
const HomePage: React.FC = () => {
return (
<div>
<Hero imageUrl="path/to/image.png" />
</div>
);
};
export default HomePage;
Answered by B33fb0n3
the whole stuff on how you initialize a component looks a bit scuffed to me, but should work anyway. Use the
I like to use this template to create a new component (if you want it):
<Image /> tag von nextjs itself to have optimizations in it. The rest looks good for me.I like to use this template to create a new component (if you want it):
type MyPageProps = {};
export default function MyPage({}: MyPageProps) {
return (
<>
<h1>MyPage</h1>
</>
);
}4 Replies
@Transvaal lion I want to create reusable components, such as a simple Hero section. I want to use this Hero component on every page but with a different URL for the image. What is the best way to implement this in Next.js 15? I already have a way of doing this, but I was unsure if it was the right and most efficient approach.
The component:
// Component/Hero.tsx
import React from "react";
type HeroProps = {
imageUrl: string;
};
const Hero: React.FC<HeroProps> = ({ imageUrl }) => {
return (
<section>
<img src={imageUrl} alt="Hero image" />
</section>
);
};
export default Hero;
Implementation:
home/page.tsx
import React from "react";
import Hero from "../components/Hero";
const HomePage: React.FC = () => {
return (
<div>
<Hero imageUrl="path/to/image.png" />
</div>
);
};
export default HomePage;
the whole stuff on how you initialize a component looks a bit scuffed to me, but should work anyway. Use the
I like to use this template to create a new component (if you want it):
<Image /> tag von nextjs itself to have optimizations in it. The rest looks good for me.I like to use this template to create a new component (if you want it):
type MyPageProps = {};
export default function MyPage({}: MyPageProps) {
return (
<>
<h1>MyPage</h1>
</>
);
}Answer
@Transvaal lion solved?
Transvaal lionOP
Yes thanks
happy to help