Creating My First Page with NextJS

In this guide, we’ll walk through the process of creating your first page in a Next.js project by setting up a layout.tsx file that includes a header and footer. We'll also remove the default boilerplate, set up global styles using Tailwind CSS, and ensure proper page structure.

Let’s dive in!

Step 1: Edit `page.tsx` and Remove Boilerplate

First, clean up the default content from page.tsx to keep it minimal.

Open the app/page.tsx file.
Replace the content with this simple JSX structure:

// app/page.tsx

export default function Home() {
  return (
    <div className="container mx-auto">
      <h1 className="text-3xl font-bold">Welcome to My First Next.js Page!</h1>
      <p className="mt-4">This is a simple page setup with Next.js and Tailwind CSS.</p>
    </div>
  );
}

This keeps the page clean, focusing on just the content, as the layout will now be handled in layout.tsx.

Step 2: Edit `globals.css` and Setup Tailwind

Next, we’ll configure global styles by removing the default Next.js styles and ensuring only Tailwind CSS is used.

Open the app/globals.css file.
Remove all the default styles, leaving only the Tailwind CSS directives:

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

This setup ensures that Tailwind CSS is responsible for styling the entire application.

Step 3: Create and Import a Simple Footer Component

Since we don’t need a header for metadata, let’s create a Footer component that can be reused across multiple pages.

Create a new file in the components/ folder called Footer.tsx.

Here’s the Footer component:

// components/Footer.tsx

const Footer = () => {
  return (
    <footer className="bg-gray-800 text-white text-center p-4 mt-8">
      <p>&copy; 2024 MyApp. All rights reserved.</p>
    </footer>
  );
};

export default Footer;

The Footer component contains a simple copyright message styled with Tailwind CSS.

Step 4: Set Up `layout.tsx` to Include the Footer

Now, we’ll update the layout.tsx file to include the Footer and set up a structure that applies the footer across all pages.

Open the app/layout.tsx file.
Import the Footer component and include it in the layout.

Here’s the updated layout.tsx:

// app/layout.tsx

import './globals.css';
import Footer from '../components/Footer';

export const metadata = {
  title: 'My First Next.js Page',
  description: 'A simple guide to creating your first Next.js page with Tailwind CSS',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="min-h-screen flex flex-col">
        <main className="flex-grow container mx-auto p-4">
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

Footer: Imported at the top and placed at the bottom of the page layout.
children: Represents the page content passed into the layout.

Step 5: Finalize the Page

At this point, your page.tsx is automatically using the layout that includes the footer.

Here’s the final structure for page.tsx:

// app/page.tsx

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My First Next.js Page</title>
        <meta name="description" content="This is a simple Next.js page" />
      </Head>
      <div className="container mx-auto">
        <h1 className="text-3xl font-bold">Welcome to My First Next.js Page!</h1>
        <p className="mt-4">This is a simple page setup with Next.js and Tailwind CSS.</p>
      </div>
    </>
  );
}

With the layout in place, every page in the app will include the Footer at the bottom and can use the Head component to dynamically control metadata.

Conclusion

In this guide, we’ve walked through the process of setting up a simple Next.js page by:

Removing the default boilerplate in page.tsx.
Configuring globals.css to use Tailwind CSS.
Creating a reusable Footer component.
Using layout.tsx to apply the footer across all pages and dynamically managing metadata with the Head component.

Step 1: Edit page.tsx and Remove Boilerplate

Step 2: Edit globals.css and Setup Tailwind