Skip to content

App Integration: Implementing all core routes and navigation links

Now that you understand how file-system based routing, nested layouts, dynamic routes, and the <Link> component work, it's time to put it all together by integrating the core routes for our Task Management App. We'll create the necessary page.tsx files for our login and signup routes, and then update our navigation to include links to all our primary application pages.

Create Routes for /, /dashboard, /tasks/[taskId], /login, /signup

You already have the /, /dashboard, and /tasks/[id] routes set up. Let's add the login and signup routes.

  1. Create new folders and page.tsx files for login and signup inside your app directory:
my-task-app/
└── app/
    ├── ...
    ├── login/            <-- NEW DIRECTORY
    │   └── page.tsx      <-- NEW FILE
    ├── signup/           <-- NEW DIRECTORY
    │   └── page.tsx      <-- NEW FILE
    └── ...

  1. Add content to app/login/page.tsx:

    app/login/page.tsx

    // app/login/page.tsx
// This file defines the content for the /login route.
// It will eventually host our user login form.

export default function LoginPage() {
  return (
    <div className="flex flex-col items-center justify-center p-6 bg-white shadow-md rounded-lg mx-auto max-w-md">
      <h2 className="text-3xl font-bold text-gray-800 mb-6">Login to TaskFlow</h2>
      <p className="text-lg text-gray-600 mb-4">
        (Login form will go here in a future module)
      </p>
      <p className="text-sm text-gray-500">
        Don't have an account? <span className="text-blue-600 font-semibold">Sign Up</span>
      </p>
    </div>
  );
}

  2. Add content to app/signup/page.tsx:

    app/signup/page.tsx

    // app/signup/page.tsx
// This file defines the content for the /signup route.
// It will eventually host our user registration form.

export default function SignupPage() {
  return (
    <div className="flex flex-col items-center justify-center p-6 bg-white shadow-md rounded-lg mx-auto max-w-md">
      <h2 className="text-3xl font-bold text-gray-800 mb-6">Create Your TaskFlow Account</h2>
      <p className="text-lg text-gray-600 mb-4">
        (Sign up form will go here in a future module)
      </p>
      <p className="text-sm text-gray-500">
        Already have an account? <span className="text-blue-600 font-semibold">Login</span>
      </p>
    </div>
  );
}

Now that all our core routes are in place, let's update the Header and DashboardLayout components to provide navigation links to all these new pages.

  1. Update components/Header.tsx: We'll add links for "Login" and "Sign Up" to the main header.

components/Header.tsx (Update this file)

// 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.
// Updated to include links for all core routes.

import Link from 'next/link';

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 - Link to homepage */}
        <Link href="/" className="text-3xl font-extrabold tracking-tight hover:text-blue-200 transition duration-300">
            My TaskFlow
        </Link>

        {/* Navigation */}
        <nav>
            <ul className="flex space-x-6">
            <li>
                <Link href="/dashboard" className="hover:text-blue-200 transition duration-300">
                Dashboard
                </Link>
            </li>
            {/* We can keep a sample task link for testing dynamic routes */}
            <li>
                <Link href="/tasks/sample-task-123" className="hover:text-blue-200 transition duration-300">
                Sample Task
                </Link>
            </li>
            <li>
                <Link href="/login" className="hover:text-blue-200 transition duration-300">
                Login
                </Link>
            </li>
            <li>
                <Link href="/signup" className="hover:text-blue-200 transition duration-300">
                Sign Up
                </Link>
            </li>
            </ul>
        </nav>
        </div>
    </header>
    );
}
  1. Update app/dashboard/layout.tsx: We'll add a link to the "All Tasks" overview (which is the dashboard itself) and potentially a link back to the main homepage, or a link to "Add New Task" once we build that page. For now, let's ensure "All Tasks" is clearly linked.

app/dashboard/layout.tsx (Update this file)

// app/dashboard/layout.tsx
// This layout specifically applies to the /dashboard route and any of its nested routes.
// Updated to include comprehensive navigation links within the dashboard sidebar.

import Link from 'next/link';

export default function DashboardLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
    <div className="flex flex-col md:flex-row min-h-[calc(100vh-180px)]">
        {/* Dashboard Sidebar */}
        <aside className="w-full md:w-64 bg-gray-50 p-6 shadow-md rounded-lg md:mr-6 mb-6 md:mb-0">
        <h3 className="text-xl font-semibold text-gray-700 mb-4">Dashboard Navigation</h3>
        <nav>
            <ul className="space-y-3">
            <li>
                {/* Link to the Dashboard root (All Tasks) */}
                <Link
                href="/dashboard"
                className="block p-3 rounded-md text-blue-600 hover:bg-blue-100 transition duration-200"
                >
                All Tasks
                </Link>
            </li>
            {/* Example link to a dynamic task page (can be removed later once actual tasks are implemented) */}
            <li>
                <Link
                href="/tasks/another-sample-id"
                className="block p-3 rounded-md text-gray-700 hover:bg-gray-200 transition duration-200"
                >
                View Sample Task
                </Link>
            </li>
            <li>
                {/* Link to Settings within the dashboard context */}
                <Link
                href="/dashboard/settings"
                className="block p-3 rounded-md text-gray-700 hover:bg-gray-200 transition duration-200"
                >
                Settings
                </Link>
            </li>
            {/* Optionally, a link to add a new task if we create that page here */}
            {/* <li>
                <Link
                href="/dashboard/add-task"
                className="block p-3 rounded-md text-green-600 hover:bg-green-100 transition duration-200"
                >
                Add New Task
                </Link>
            </li> */}
            </ul>
        </nav>
        </aside>

        {/* Main content area for the dashboard */}
        <section className="flex-grow bg-white p-6 shadow-md rounded-lg">
        {children}
        </section>
    </div>
    );
}

Summary

What we've done:

  • We've successfully created the login and signup routes by adding page.tsx files within their respective app/ subdirectories.
  • We've updated components/Header.tsx to include navigation links to the new login and signup pages, as well as the existing dashboard and a sample task page.
  • We've ensured that all navigation now utilizes the <Link> component for optimized client-side routing.

To verify the integration:

  1. Ensure your development server is running (npm run dev).
  2. Open your browser and navigate to http://localhost:3000.
  3. Test all the navigation links in the header: "Dashboard", "Sample Task", "Login", and "Sign Up". Confirm that each link takes you to the correct page and that the transitions are smooth.

You have now completed the core routing setup for your Task Management App! This robust routing foundation will allow you to build out the different sections of your application seamlessly.

© TutoriaLibre. All rights reserved.

Change cookie settings