Basic layouts in Next.js¶

Setting up the Root `layout.js` and `page.js`¶

The app/layout.js file is the root layout for your entire application. It's where you'll define the <html> and <body> tags and any UI that should be present on every page, like a navigation bar or a footer. The app/page.js file, on the other hand, is the default content for your application's homepage (/).

First, let's create a dedicated components directory to organize our reusable UI components like Header and Footer. Inside your my-task-app (or src/ if you chose that option) directory, create a new folder named components.

my-task-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── favicon.ico
├── components/           <-- NEW DIRECTORY
│   ├── Header.tsx         <-- NEW FILE
│   └── Footer.tsx         <-- NEW FILE
├── node_modules/
...

Creating Header and Footer components¶

Now, let's create the Header.js and Footer.js components:

components/Header.tsx

// components/Header.tsx
// This is a reusable Header component for the Task Management App.
// It will display the app title and will eventually hold navigation links.

// It's a Server Component by default, as no 'use client' directive is present.
// This means it will be rendered on the server.
export default function Header() {
  return (
    <header className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-4 shadow-lg rounded-b-lg">
      <div className="container mx-auto flex justify-between items-center py-2">
        {/* Application Title */}
        <h1 className="text-3xl font-extrabold tracking-tight">
          My TaskFlow
        </h1>
        {/* Navigation - will be expanded in future modules */}
        <nav>
          {/* We'll add navigation links here later */}
          {/* <ul className="flex space-x-6">
            <li><a href="#" className="hover:text-blue-200 transition duration-300">Tasks</a></li>
            <li><a href="#" className="hover:text-blue-200 transition duration-300">About</a></li>
          </ul> */}
        </nav>
      </div>
    </header>
  );
}

components/Footer.tsx

// components/Footer.tsx
// This is a reusable Footer component for the Task Management App.
// It will display copyright information and other relevant links.

// It's a Server Component by default.
export default function Footer() {
  return (
    <footer className="bg-gray-800 text-white p-6 text-center shadow-inner rounded-t-lg mt-8">
      <div className="container mx-auto">
        <p className="text-sm">
          &copy; {new Date().getFullYear()} My TaskFlow. All rights reserved.
        </p>
        <p className="text-xs mt-2 text-gray-400">
          Built with Next.js and Tailwind CSS.
        </p>
      </div>
    </footer>
  );
}

Create the base layout¶

Next, let's modify the root layout.js file (app/layout.js). This file wraps our entire application, providing the basic HTML structure and applying global styles. If you chose Tailwind CSS during setup, globals.css (which contains Tailwind directives) should already be imported here.

app/layout.tsx (Update this file)

// app/layout.tsx
// This is the root layout for the entire Next.js application.
// It defines the <html> and <body> tags and any UI that is shared across all pages.
// Components in this file are Server Components by default.

import './globals.css'; // Global styles, including Tailwind CSS directives
import { Inter } from 'next/font/google'; // Optimizes font loading
import Header from '../components/Header'; // Import the Header component
import Footer from '../components/Footer'; // Import the Footer component

// Initialize the Inter font with subsetting for performance
const inter = Inter({ subsets: ['latin'] });

// Define metadata for the application (important for SEO)
export const metadata = {
  title: 'My TaskFlow - Task Management App',
  description: 'Organize your life with My TaskFlow, a simple and efficient task management application built with Next.js.',
};

// The RootLayout component wraps all pages in the application.
// It takes `children` as a prop, which represents the content of the current page.
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      {/* Apply the Inter font to the body */}
      <body className={`${inter.className} flex flex-col min-h-screen bg-gray-100 text-gray-800`}>
        {/* Render the Header component */}
        <Header />

        {/* Main content area, which will render the current page's content */}
        {/* Use flex-grow to ensure the main content pushes the footer to the bottom */}
        <main className="flex-grow container mx-auto p-4 md:p-8">
          {children}
        </main>

        {/* Render the Footer component */}
        <Footer />
      </body>
    </html>
  );
}

Apply the layout to pages¶

Finally, let's simplify the page.js file (app/page.js). This file represents the content specific to your homepage (/).

app/page.tsx (Update this file)

// app/page.tsx
// This file defines the content for the homepage ('/') of the application.
// It is a Server Component by default.

export default function HomePage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-250px)] text-center px-4">
      <h2 className="text-4xl md:text-5xl font-bold text-blue-700 mb-4 animate-fade-in">
        Welcome to My TaskFlow!
      </h2>
      <p className="text-xl text-gray-600 mb-8 max-w-2xl animate-slide-up">
        Your simple solution for organizing tasks and boosting productivity.
      </p>
      <p className="text-md text-gray-500">
        Start by managing your daily tasks with ease.
      </p>
    </div>
  );
}

Summary¶

What we've done:

We created Header.tsx and Footer.tsx components in a new components/ directory for better organization.
We updated app/layout.tsx to import and render our Header and Footer, effectively creating a consistent wrapper around all pages. We also added global Tailwind classes to the body and used the Inter font.
We updated app/page.tsx to display a simple welcome message for the homepage, using Tailwind CSS for styling.
We've added basic metadata to layout.tsx, which is crucial for SEO in Next.js applications.

To see your changes:

Make sure your development server is running (npm run dev).
Open your browser and navigate to http://localhost:3000.

You should now see a page with a blue/indigo gradient header, a welcome message in the center, and a dark gray footer at the bottom! This sets the stage for building more complex features for our Task Management App.