Next.js Discord

Discord Forum

router doesn't work

Unanswered
Reddish carpenter ant posted this in #help-forum
Open in Discord
Reddish carpenter antOP
router doesnt work i just get 404 no matter what i do

126 Replies

Reddish carpenter antOP
import {AppProps} from "next/app"
import Layout from "../components/layout"

export default function App({Component, pageProps}: AppProps) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}
pages/_app.tsx
i have pages/index.tsx component for root
it just doesnt work
thers also a app/layout.tsx file
idk what else to tell you
there also a page pages/Content.tsx
everything default exports a component
pages/index.tsx
export default function Page() {
    return null
}
@Reddish carpenter ant i have `pages/index.tsx` component for root
Ray
do you mean you go to http://localhost:3000 and got 404?
Reddish carpenter antOP
yep
the vercel 404
even if i go to /content ill get a 404
@Reddish carpenter ant yep
Ray
export default function Page() {
    return <div>hello</div>
}

have you tried this?
Reddish carpenter antOP
yep
nothing works
Ray
could you show the folder structure
in a screenshot
Reddish carpenter antOP
@Reddish carpenter ant Click to see attachment
Ray
move pages folder to root
same level as app folder
Reddish carpenter antOP
whats the point of the app folder then
and docs say otherwise
Reddish carpenter antOP
can i also move assets and components to repo root?
Ray
yes
but don't move it inside pages because every file inside pages will become a route
Reddish carpenter antOP
intellisense broke
the @ import broke
import {LayoutProps} from "@/.next/types/app/layout"
Ray
well your editor changed the path for you
Reddish carpenter antOP
 "paths": {
            "@/*": ["./*"]
        },

what is this
why does this exist
it says cannot find
Ray
find what?
Reddish carpenter antOP
Cannot find module '@/.next/types/app/layout' or its corresponding type declarations.ts(2307)
Ray
where is your layout
you should change the path
I don't know where did you move your folder
Reddish carpenter antOP
repo root
inside components dir
Ray
so import {LayoutProps} from "./components/layout"
Reddish carpenter antOP
no this line is inside components/layout
Ray
import {LayoutProps} from "./.next/types/app/layout
Reddish carpenter antOP
no
had to add "baseUrl": "." to tsconfig
why doesn't create next app do this
wait it still doesnt work
Ray
?
Reddish carpenter antOP
Cannot find module '@/app/bloom' or its corresponding type declarations.ts(2307)
Ray
change the import path
Reddish carpenter antOP
change the what
to what
Ray
where is the bloom folder
Reddish carpenter antOP
in @/app/bloom
its not a folder
Reddish carpenter antOP
it still doesnt work
now it only doesnt work for .next imports
Ray
you shoudn't import from .next
LayoutProps is a type generated for app router
not for pages
Reddish carpenter antOP
what should be the type then?
@Reddish carpenter ant what should be the type then?
Ray
what are you gonna pass it?
Reddish carpenter antOP
idk
the docs told me to make this file
ok now routes are working
but the root layout file from app/layout.tsx does nothing now
Ray
just children props then
because you are viewing a route in pages router
Reddish carpenter antOP
how do i make it work then
should i return html from my components/layout.tsx
import type {Metadata} from "next"
import {Urbanist} from "next/font/google"
import "./main.scss"

const urbanist = Urbanist({subsets: ["latin"]})

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
}

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode
}>) {
    return (
        <html lang="en">
            <head>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
                />
            </head>
            <body className={urbanist.className}>{children}</body>
        </html>
    )
}

like this?
Reddish carpenter antOP
how do i add the className to body then?
and head tag
Reddish carpenter antOP
Reddish carpenter antOP
what
import "@/app/main.scss"
import {Html, Main, NextScript} from "next/document"
import Head from "next/head"

export default function Document() {
    return (
        <Html lang="en">
            <Head>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
                />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}
Ray
import styles in _app.js intead
Reddish carpenter antOP
im not
where style
Reddish carpenter antOP
my css isnt working
can i use @ in scss?
there are no errors
it just doesnt apply
Ray
did you import the style
Reddish carpenter antOP
yes
Ray
on where
Reddish carpenter antOP
_app
there is literally nothing in the head tag
I would suggest you create a new project with npx create-next-app@latest and choose not to use app router
Reddish carpenter antOP
what
i used npx create-next-app@latest
what is app router
Ray
the route inside the app folder
Reddish carpenter antOP
is this deprecated already?
Ray
I don't understand why did you create the project with app router then migrate to page router
no
Reddish carpenter antOP
it didnt even tell me
that im not suppsed to use it
Ray
if you want to use page router, just choose not to use app router
Reddish carpenter antOP
i still dont know what app router is
Ray
https://nextjs.org/docs
you should check the doc
Reddish carpenter antOP
i did
its not there
it is
@Reddish carpenter ant its not there
Ray
which mean you didn't read
Reddish carpenter antOP
i did
i didnt see this dropdown
i didnt even know it existed
i was stuck on pages router
thanks for your help
how to get the current route?
without using a client component and usePathname?
how to make routes case-insensitive?
or convert file name to kebab case