i've created the below code in the /pages/articles folder but when i went to acess it in the form /articles/foo/value1 i get a 404 error. what am i missing?
code goes like this:

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

now if nextjs doesn't support this natively or this is any complex, i'm fine passing the value as query string. But I also need to know how to read thos without getting them as undefined. i've tried something like this:

import { useRouter } from 'next/router'
import { useEffect } from 'react'

const Index = () => {
  const router = useRouter()
  const {id} = router.query

  console.log('foo.tsx says: id = ', id);

  useEffect(() => {
    if(!router.isReady) return;
    
    const {id} = router.query;

    console.log('foo.tsx says: id = ', id);
    console.log('router.query = ', router.query);
  }, [router.isReady, router.query]);

  return(<div>the number is {id}</div>)
}

export default Index;

but useEffect doesn't get called for some reason