Problems trying to migrate to app router
Unanswered
hmsimha posted this in #help-forum
hmsimhaOP
I'm trying to partially migrate an app from the pages router to the app router. I have created the following files:
-
-
-
-
I'm expecting to see a page which shows
This is with Next.js 13.0.2, Typescript 5.1.3, and Node.js 20.10.0
-
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 404This 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
In the next config
experimental: {
appDir: true
}
In the next config
!solved
@hmsimha !solved
Mark your answer as solved
Original message was deleted
Like this