One issue I encountered involved having an index.tsx file containing all the shared UI components. When I exported the Footer and imported it into my shared Layout.tsx, which is utilized across all pages, the browser would refresh the page every time a change was made rather than performing a fast refresh.
This behavior occurred whenever I tried to default export any component and include it wherever needed.
Surprisingly, all child components functioned perfectly fine. The issues only arose when default exporting everything.
I am curious if there are any solutions, fixes, or reasons for this problem?
/components/ui/index.tsx:
export { default as Alert } from "./Alert"
export { default as Footer } from "./footer"
export { default as Logo } from "./logo"
export { default as MainNavigation } from "./main-navigation"
export { default as MaxWidthWrapper } from "./max-width-wrapper"
export { default as PageAnimate } from "./page-animate"
export { default as ThemeSwitch } from "./theme-switch"
Layout.tsx:
"use client"
import { MaxWidthWrapper, PageAnimate } from "@components/ui"
import { Footer, MainNavigation } from "@components/ui"
const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<>
<MainNavigation />
<PageAnimate>
<MaxWidthWrapper type="main">{children}</MaxWidthWrapper>
</PageAnimate>
<Footer />
</>
)
}
export default Layout
Footer.tsx:
"use client"
import { FaFacebook, FaTwitter, FaInstagram, FaYoutube } from "react-icons/fa"
import MaxWidthWrapper from "./max-width-wrapper"
import { SocialProps } from "types"
const Footer = ({ socialFields }: SocialProps) => {
return (
<MaxWidthWrapper
container
type="footer"
className="flex flex-row items-center justify-between py-5 flex-nowrap"
>
<p className="text-xs">
© {new Date().getFullYear()} The Friendly Vegan24
</p>
<div className="flex justify-center space-x-3">
<a
target="_blank"
rel="noreferrer"
href="https://www.facebook.com"
title="Instagram"
className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
>
<FaFacebook className="w-4 h-4 text-midnight" />
</a>
<a
target="_blank"
rel="noreferrer"
href="https://www.instagram.com"
title="Facebook"
className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
>
<FaInstagram className="w-4 h-4 text-midnight" />
</a>
<a
target="_blank"
rel="noreferrer"
href="https://twitter.com"
title="Twitter"
className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
>
<FaTwitter className="w-4 h-4 text-midnight" />
</a>
<a
target="_blank"
rel="noreferrer"
href="https://youtube.com"
title="Twitter"
className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
>
<FaYoutube className="w-4 h-4 text-midnight" />
</a>
</div>
</MaxWidthWrapper>
)
}
export default Footer
/pages/index.tsx (home)
import { NextSeo } from "next-seo"
import { ButtonProps } from "types"
import { Layout, SectionHeader } from "@components/sections"
import {
Hero,
InfoCard,
Feature,
Newsletter,
BlogCard,
Contact
} from "@components/blocks"
import { Grid, Section } from "@components/shared"
import HeroImage from "@images/hero.png"
const HomePage = () => {
const HeroButtons: ButtonProps[] = [
{
id: 1,
href: "/",
text: "Get in touch!"
},
{
id: 2,
href: "/over-ons",
text: "Over ons"
}
]
return (
<Layout>
<NextSeo
title="Home"
openGraph={{
type: "website",
url: "https://ffb-next-static.vercel.app",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec suscipit diam, ac scelerisque libero. Vestibulum sapien lorem, placerat quis orci id, tempor mattis felis.",
images: [
{
url: "https://images.pexels.com/photos/1059823/pexels-photo-1059823.jpeg?auto=compress&cs=tinysrgb&w=1200&h=630&dpr=2",
width: 1200,
height: 630,
alt: "We welcome you",
type: "image/jpeg"
}
]
}}
/>
<Hero
funny
buttons={HeroButtons}
featuredImage={HeroImage.src}
title="The Friendly Vegan"
intro="Ruimte voor tekst om de bezoeker welkom te heten, of om te
beschrijven wat je doet met je product of dienst."
/>
<Section>
<SectionHeader
title="Onze werkzaamheden"
text="Ruimte voor tekst om in te leiden welke stappen je hieronder gaat uitleggen. Bijvoorbeeld de waarden waar je bedrijf voor staat, of het proces wat je doorloopt."
/>
<Grid>
<InfoCard
featuredImage="https://source.unsplash.com/1024x800/?food?1"
title="Recepten"
text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
/>
<InfoCard
featuredImage="https://source.unsplash.com/1024x800/?food?2"
title="Catering"
text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
/>
<InfoCard
featuredImage="https://source.unsplash.com/1024x800/?food?3"
title="Workshops"
text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
/>
<InfoCard
featuredImage="https://source.unsplash.com/1024x800/?food?4"
title="Duurzaamheid"
text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
/>
</Grid>
</Section>
<Section>
<Feature />
</Section>
<Section className="bg-sun sm:bg-transparent">
<Newsletter />
</Section>
<Section>
<SectionHeader
buttonLink="/blog"
buttonText="Naar alle artikelen"
title="Blog"
text="Ruimte voor tekst om in te leiden welke stappen je hieronder gaat uitleggen. Bijvoorbeeld de waarden waar je bedrijf voor staat, of het proces wat je doorloopt."
/>
<Grid className="grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 pb-14">
<BlogCard image="https://source.unsplash.com/1024x800/?food?8" />
<BlogCard className="text-midnight bg-primary" />
<BlogCard className="text-midnight bg-neutral" />
</Grid>
</Section>
<Section className="bg-sun sm:bg-transparent">
<Contact />
</Section>
</Layout>
)
}
export default HomePage