Next-JS Link tag not properly redirecting?

Question

I'm trying to learn Next-JS, and I'm making a small, experimental project to familiarize myself. However, something seems to be going wrong with the Link tag. It does redirect to the friends page specified, but for some reason, the page content remains the same as it is on home. And clicking the test link while on this page, it attempts to redirect not to "#", but to "friends#".

Is there something I'm not understanding here? Any help would be appreciated. Here is my conde:

index.tsx:

import Link from 'next/link';
import styles from '../styles/Home.module.css'

const HomePage = () => {

    // const handleClick = (e: Event) => {
    //     e.preventDefault()
    //     router.push('./friends')
    //     alert(router)
    return (
        <div className={styles.div}>
            <h1 className={styles.h1}>WELCOME TO HOME PAGE</h1>
            <ul className={styles.ul}>
                <li className={styles.li}>
                    <Link href='/friends'>
                        <a>FRIENDS</a>
                    </Link>
                </li>
                <li className={styles.li}>
                    <Link href="#">
                        <a>TEST</a>
                    </Link>
                </li>
            </ul>
        </div>
    )

}

export default HomePage

friends.tsx:

import Link from 'next/link'

const Friends = () => {
    return (
        <div>
            <h1>WELCOME TO FRIENDS</h1>
            <Link href="/">
                RETURN TO HOME
            </Link>
        </div>
    )
}
    
export default Friends;

_app.tsx:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import HomePage from '../pages/index'

function MyApp({ Component, pageProps }: AppProps) {
  return <HomePage />
}
export default MyApp

Screentshots of what I'm seeing are listed below. Note the URLs.

1. Home page

2. Friends page

3. After clicking the Test link, for which the href is currently "#"

Answer 1

You're seeing the same page on all links is because you're always displaying the same component, which is <Homepage /> . Instead, you need to render the component with pageProps to display the correct page according to the url.

The updated code of the _App component should be something like, where you need to display the Component available through the props.

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default MyApp

Please also take a look at the docs of the Next.js regarding the custom _app , to see available options/features out of the box.

From docs: The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page . Therefore, any props you send to Component will be received by the page.

pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.