LoginApp: Creating a Reusable App Layout

Published: November 2, 2025

As my project grows, I don’t want to repeat the same layout structure on every page. A shared layout component helps keep things consistent and makes updates easier down the line.

I created an AppLayout component that wraps page content and gives all screens the same centered layout and background.

I started by creating a new file:

src/components/AppLayout.tsx
            

This component will accept children, which is how React passes nested content into reusable components. In React, React.ReactNode describes anything you can put between JSX tags: text, elements, or even other components.

Here’s the full code:

import React from "react";

type Props = {
  children: React.ReactNode;
};

export default function AppLayout({ children }: Props) {
  return (
    <main className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-400 to-purple-400 font-sans">
      <div className="bg-white p-10 rounded-xl shadow-lg w-full max-w-md text-center">
        {children}
      </div>
    </main>
  );
}
            

This creates a full-height gradient background and centers any content inside a rounded white box.

Now every page can share this same structure simply by wrapping its content in <AppLayout>.

Next, I updated the Dashboard page to use the new layout:

import Link from "next/link";
import AppLayout from "../../components/AppLayout";

export default function Dashboard() {
  return (
    <AppLayout>
      <h1 className="text-2xl font-bold text-blue-500 mb-4">Dashboard</h1>
      <p className="mb-6 text-gray-700">
        Welcome to your dashboard. You're logged in!
      </p>
      <div className="flex flex-col items-center mt-10 gap-4">
        <Link
          href="/logout"
          className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition"
        >
          Log out
        </Link>
      </div>
    </AppLayout>
  );
}
            

This keeps the content clean and centered without repeating layout markup on every page.

A layout component does more than just make the UI consistent, it also makes maintenance easier. If I ever want to change the background, adjust spacing, or add a logo header, I can do it in one place instead of across multiple files.