Link tag just changes the url but not render the page

Question

I'm trying to learn next js routing and encountered an error.

Every time I click the Link tag it just changes the url from "localhost:3000" to "localhost:3000/sample" but it doesn't display the "Hi" on my sample.js file

import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
    return (
        <div>
            <Link href={"/sample"} as={'/sample'} >
                <a>CLICK ME</a>
            </Link>

        </div>
    )
}

export default Lnkz

and here is my sample.js file that displays "Hi" only.

export default function Sample() {
    return (
        <div>
            <h1>hi</h1>
        </div>
    )
}

My entry file.

import '../styles/globals.css'
import Lnkz from './Lnkz'

function MyApp({ Component, pageProps }) {
  return (
    <div>

      <Lnkz />

    </div>
  )
}

export default MyApp

NOTE: I already tried to do this but it doesn't work too.

import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
    return (
        <div>
            <Link href="/sample" as='/sample'>
                <a>CLICK ME</a>
            </Link>

        </div>
    )
}

export default Lnkz

Here is my directory

EDIT: Added the code I also tried before and added screenshot of my directory.

Answer 1

I think after seeing your directory, the problem is in the casing. Only include "as" if you are using an older version of next.js, more on that here.

try this or change your file name to sample.js (with small 's')

  <Link href={"/Sample"}>
        <a>CLICK ME</a>
  </Link>