I am using next.js 14 and having problem with the linking convention. I have checked the documentation but there's not explanation when the page you want to link is in another folder. i want to call the login page in the components folder to be navigated to when the get started link is pressed in my page.tsx. this is the structure of my project

app
| -- components
  |---login
    |----page.tsx
page.tsx

this is my page.tsx

import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  return (
    <main className="flex min-h-screen">
      <div className="relative w-1/2">
        <Image
          src="/logo.png"
          alt="SIMS Logo"
          fill
          priority
          className="object-cover"
        />
      </div>

      <div className="w-1/2 flex flex-col items-center justify-center bg-gray-50 p-6">
        <h1 className="text-4xl font-bold mb-4">Welcome to SIMS</h1>
        <p className="text-xl text-gray-600 mb-8">Manage Your Materials, Master Your Lessons</p>
        <Link 
        href = "/Login"
        className="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
        >
          Get started
        </Link>
      </div>
    </main>
  );
}

this is my login page.tsx

import React from 'react';
import RoleButton from '../RoleButton/rolebutton';

export default function Login() {
    return (
        <div className="min-h-screen flex flex-col items-center justify-center">
            <div className="max-w-md w-full mx-auto px-4"> {/* Changed from max-w-2xl to max-w-md */}
                <h1 className="text-3xl font-bold text-gray-800 sm:text-5xl mb-8 text-center">
                    Select Your Role
                </h1> 
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 max-w-lg mx-auto"> {/* Changed gap-4 to gap-2 and max-w-3xl to max-w-lg */}
                    <RoleButton role="admin" title="Admin" />
                    <RoleButton role="stock_manager" title="Stock Manager" />
                    <RoleButton role="teacher" title="Teacher" />
                </div>
            </div>
        </div>
    );
}

do I need to change my code folder structure in order for it to work or?

I am using next.js 14 and having problem with the linking convention. I have checked the documentation but there's not explanation when the page you want to link is in another folder. i want to call the login page in the components folder to be navigated to when the get started link is pressed in my page.tsx. this is the structure of my project

app
| -- components
  |---login
    |----page.tsx
page.tsx

this is my page.tsx

import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  return (
    <main className="flex min-h-screen">
      <div className="relative w-1/2">
        <Image
          src="/logo.png"
          alt="SIMS Logo"
          fill
          priority
          className="object-cover"
        />
      </div>

      <div className="w-1/2 flex flex-col items-center justify-center bg-gray-50 p-6">
        <h1 className="text-4xl font-bold mb-4">Welcome to SIMS</h1>
        <p className="text-xl text-gray-600 mb-8">Manage Your Materials, Master Your Lessons</p>
        <Link 
        href = "/Login"
        className="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
        >
          Get started
        </Link>
      </div>
    </main>
  );
}

this is my login page.tsx

import React from 'react';
import RoleButton from '../RoleButton/rolebutton';

export default function Login() {
    return (
        <div className="min-h-screen flex flex-col items-center justify-center">
            <div className="max-w-md w-full mx-auto px-4"> {/* Changed from max-w-2xl to max-w-md */}
                <h1 className="text-3xl font-bold text-gray-800 sm:text-5xl mb-8 text-center">
                    Select Your Role
                </h1> 
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 max-w-lg mx-auto"> {/* Changed gap-4 to gap-2 and max-w-3xl to max-w-lg */}
                    <RoleButton role="admin" title="Admin" />
                    <RoleButton role="stock_manager" title="Stock Manager" />
                    <RoleButton role="teacher" title="Teacher" />
                </div>
            </div>
        </div>
    );
}

do I need to change my code folder structure in order for it to work or?

• reactjs
• next.js
• next.js14

• What is the issue? Please edit the title and post to specifically and clearly define the problem you are trying to solve. – Drew Reese Commented Mar 23 at 6:41
• Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Bot Commented Mar 24 at 1:28

1 Answer 1

When using the app router the structure should look like this app/login/page.tsx. You can read up on the official docs

app
| --login
    |----page.tsx
| -- components
page.tsx