Next.js Discord

Discord Forum

Problems trying to migrate to app router

Unanswered
hmsimha posted this in #help-forum
Open in Discord
hmsimhaOP
I'm trying to partially migrate an app from the pages router to the app router. I have created the following files:

- app/layout.tsx
export default function RootLayout({
  // Layouts must accept a children prop.
  // This will be populated with nested layouts or pages
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

- app/page.ts
import AppRouter from './pages/approuter'

export default async function Page() {
  return <AppRouter />
}

- app/pages/approuter.tsx
'use client'

export default function Main() { return <h1>Hello World</h1> }

- app/pages/index.tsx
'use client'

export default function Main() { return <h1>Hello World</h1> }


I'm expecting to see a page which shows <h1>Hello world</h1> when I curl localhost:3000/approuter, but instead I just get a 404

This is with Next.js 13.0.2, Typescript 5.1.3, and Node.js 20.10.0

5 Replies

hmsimhaOP
Also if anyone knows a sample app which uses components with both app and pages router at the same time, I'd love to see it. There was nothing in https://github.com/vercel/next-learn that does this unfortunately šŸ˜¢
hmsimhaOP
riiight so I think in next v13 you have to set

  experimental: {
    appDir: true
  }


In the next config
!solved
@hmsimha !solved
Arinji
Mark your answer as solved
Original message was deleted
Arinji
Like this