File Structure

After running the "npm run build" command, HTML files will be generated in the dist folder. The structure of an HTML file will be as follows:

app/layout.tsx

    
        import React from "react";
import "@/public/assets/css/vendors/bootstrap.min.css";
import "@/public/assets/css/vendors/swiper-bundle.min.css";
import "@/public/assets/css/vendors/nice-select.css";
import "@/public/assets/css/vendors/magnific-popup.css";
import "@/public/assets/css/vendors/odometer.css";
import "@/public/assets/css/vendors/spacing.css";

import "@/public/assets/css/main.css";

import type { Metadata } from "next";
import { DM_Sans } from "next/font/google";
import ThemeScript from "@/components/ThemeScript";
import Loading from "./loading";

const dmSans = DM_Sans({
    subsets: ["latin"],
    display: "swap",
    variable: "--at-ff-body",
});

export const metadata: Metadata = {
    title: "Orisa - Multi-purpose Next.js Template",
    description: "Generated by Orisa - Next.js Template",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en" suppressHydrationWarning>
            <head>
                <link
                    href="/assets/css/vendors/font-awesome-pro.css"
                    rel="stylesheet"
                />
            </head>
            <body className={`${dmSans.variable}`}>
                <Loading />
                <ThemeScript />
                <div className="px-blur-bottom"></div>
                {children}
            </body>
        </html>
    );
}

components/layout/layout.tsx

     
    import BackToTop from "@/components/elements/BackToTopServer";
    import BodyClass from "@/components/layout/BodyClass";
    import Footer1 from "@/components/layout/footer/Footer1";
    import Footer2 from "@/components/layout/footer/Footer2";
    import Footer3 from "@/components/layout/footer/Footer3";
    import Footer4 from "@/components/layout/footer/Footer4";
    import Footer5 from "@/components/layout/footer/Footer5";
    import Header1 from "@/components/layout/header/Header1Server";
    import Header2 from "@/components/layout/header/Header2";
    import Header3 from "@/components/layout/header/Header3";
    import Header4 from "@/components/layout/header/Header4";
    import Header5 from "@/components/layout/header/Header5";
    import ServerEffects from "@/components/layout/ServerEffects";
    
    // Header component mapping
    const HEADER_COMPONENTS = {
        1: Header1,
        2: Header2,
        3: Header3,
        4: Header4,
        5: Header5,
    } as const;
    
    // Footer component mapping
    const FOOTER_COMPONENTS = {
        1: Footer1,
        2: Footer2,
        3: Footer3,
        4: Footer4,
        5: Footer5,
    } as const;
    
    // Header component with proper composition
    function Header({ style }: { style?: number }) {
        if (!style) {
            return <Header1 />;
        }
    
        const HeaderComponent = HEADER_COMPONENTS[style as keyof typeof HEADER_COMPONENTS];
        return HeaderComponent ? <HeaderComponent /> : <Header1 />;
    }
    
    // Footer component with proper composition
    function Footer({ style }: { style?: number }) {
        if (!style) {
            return <Footer1 />;
        }
    
        const FooterComponent = FOOTER_COMPONENTS[style as keyof typeof FOOTER_COMPONENTS];
        return FooterComponent ? <FooterComponent /> : <Footer1 />;
    }
    
    // Main layout interface
    interface LayoutProps {
        children?: React.ReactNode;
        headerStyle?: number;
        footerStyle?: number;
        bodyClassName?: string;
    }
    
    // Refactored Layout component using composition
    export default function Layout({ children, headerStyle, footerStyle, bodyClassName }: LayoutProps) {
        return (
            <>
                <ServerEffects />
                <BodyClass className={bodyClassName} />
                <div id="top" />
                <Header style={headerStyle} />
                <main>{children}</main>
                <Footer style={footerStyle} />
                <BackToTop />
            </>
        );
    }
    
    // Alternative: Layout with explicit header and footer props
    interface LayoutWithComponentsProps {
        children?: React.ReactNode;
        header?: React.ReactNode;
        footer?: React.ReactNode;
    }
    
    export function LayoutWithComponents({ children, header = <Header1 />, footer = <Footer1 /> }: LayoutWithComponentsProps) {
        return (
            <>
                <ServerEffects />
                <div id="top" />
                {header}
                <main>{children}</main>
                {footer}
                <BackToTop />
            </>
        );
    }
    
    // Layout slots pattern for maximum flexibility
    interface LayoutSlotsProps {
        children?: React.ReactNode;
        header?: React.ReactNode;
        footer?: React.ReactNode;
        sidebar?: React.ReactNode;
    }
    
    export function LayoutWithSlots({ children, header = <Header1 />, footer = <Footer1 />, sidebar }: LayoutSlotsProps) {
        return (
            <>
                <ServerEffects />
                <div id="top" />
                {header}
                <div className="layout-container">
                    {sidebar && <aside className="sidebar">{sidebar}</aside>}
                    <main className="layout-main">{children}</main>
                </div>
                {footer}
                <BackToTop />
            </>
        );
    }

Dependencies

     
        {
            "name": "orisa-nextjs",
            "version": "1.0.0",
            "private": true,
            "scripts": {
                "dev": "next dev",
                "build": "next build",
                "start": "next start",
                "lint": "next lint",
                "refactor-imports": "node scripts/refactor-react-imports.js",
                "lint:fix": "next lint --fix"
            },
            "dependencies": {
                "bootstrap": "^5.3.3",
                "gsap": "^3.12.7",
                "isotope-layout": "^3.0.6",
                "next": "^16.1.6",
                "react": "^19",
                "react-dom": "^19",
                "react-fast-marquee": "^1.6.5",
                "split-text": "^1.0.0",
                "swiper": "^11.2.5",
                "wowjs": "^1.1.3"
            },
            "devDependencies": {
                "@types/bootstrap": "^5.2.10",
                "@types/isotope-layout": "^3.0.14",
                "@types/node": "^22",
                "@types/react": "^19",
                "@types/react-dom": "^19",
                "eslint": "^9",
                "eslint-config-next": "15.0.3",
                "typescript": "^5"
            }
        }