Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unexpected Rendering Behavior When Using a 'pages' Folder Outside the App Directory in App Router #75317

Open
eteen12 opened this issue Jan 25, 2025 · 0 comments
Open

Unexpected Rendering Behavior When Using a 'pages' Folder Outside the App Directory in App Router #75317

eteen12 opened this issue Jan 25, 2025 · 0 comments
Labels
Output Related to the the output configuration option.

Comments

@eteen12
Copy link

eteen12 commented Jan 25, 2025

Link to the code that reproduces this issue

https://github.com/eteen12/Isreal

To Reproduce

To reproduce

  1. Add a pages directory containing components into the project ( in this example a footer )

Image

  1. Add the component to the root layout or include it in the page.js` file as the main renderer for the homepage.
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
        <Footer />
      </body>
    </html>
  );
}
  1. Run the project locally using localhost, then navigate to /footer (or the corresponding route for your component).

Current vs. Expected behavior

Current behavior

When using the App Router, placing a file or folder named pages in the root of the project causes unexpected behavior. The components inside this pages folder will render when navigating to their corresponding component names, or in this example case /footer.

Image

Expected behavior

When using the App Router, the Pages Router should be completely removed and should no longer be referenced for rendering. The behavior should be similar to using a components folder for placing components, where the folder cannot render individual pages. The 'pages' folder should not be treated as a route.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #52-Ubuntu SMP PREEMPT_DYNAMIC Thu Dec  5 13:09:44 UTC 2024
  Available memory (MB): 15929
  Available CPU cores: 12
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.4 // There is a newer version (15.1.6) available, upgrade recommended! 
  eslint-config-next: 15.1.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: export

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), Other (Deployed)

Additional context

I understand that naming a components folder 'pages' is unconventional, but this was for a micro meme site I made, and I thought I’d report the issue.

It is available locally and in the cloud flare pages environment, when the site was indexed I noticed that so were the pages component routes.
@github-actions github-actions bot added the Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. label Jan 25, 2025
@samcx samcx added Output Related to the the output configuration option. and removed Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. labels Jan 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Output Related to the the output configuration option.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@samcx @eteen12