Ch01 Index Page - Invalid `<Link>` with `<a>` child

[Minsu386]

Hello, I have just started this project and I am on the first Chapter where we add the Header component to the Index Page. After Adding the Component to Index, I received the following error:

Unhandled Runtime Error Error: Invalid <Link> with child. Please remove or use <Link legacyBehavior>.

The error provides a link (see below) with a work around.

Work Around - Add legacyBehavior to your Link tag before the closing. See Reference below. https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor.

[Ayu5hsingh]

I want to work on this issue. Can you tell me more about it

[Minsu386]

following the guide in Chapter 1. Header Component For the components/Header.js file

if I try to run the file as is with the examples given in the book. I receive this error:

following the link that the server error gives me to learn more gives us a walk-around by editing the <Link by adding legacybehavior

import Link from 'next/link';

import Toolbar from '@mui/material/Toolbar';
import Grid from '@mui/material/Grid';

import { styleToolbar } from './SharedStyles';

const Header = () => (
  <div>
    <Toolbar style={styleToolbar}>
      <Grid container direction="row" justifyContent="space-around" align="center">
        <Grid item xs={12} style={{ textAlign: 'right' }}>
          <Link legacyBehavior href="/login">
            <a style={{ margin: '0px 20px 0px auto' }}>Log in</a>
          </Link>
        </Grid>
      </Grid>
    </Toolbar>
  </div>
);

export default Header;

[TusharSahu02]

You need not to use tag inside Link tag, Link tag itself is a reference of tag in nextjs