<s>[INST] I am trying to create a website using Next.js with a single layout component ( Nav, Footer, etc).

However, when I try to wrap my pages with the layout component, I get an error saying that the Nav is not defined.

Here's the layout component:

```jsx
import { Nav } from './Nav';
import { Footer } from './Footer';

const Layout = ({ children }) => {
    return (
        <div>
            <Nav />
            {children}
            <Footer />
        </div>
    );
};

export default Layout;
```

Here's my `_app.js`:

```jsx
import Layout from './layout';

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;
```

And here's my `Nav.js`:

```jsx
import Link from 'next/link';

const Nav = () => {
    return (
        <nav>
            <Link href="/">
                <a>Home</a>
            </Link>
            <Link href="/about">
                <a>About</a>
            </Link>
            <Link href="/contact">
                <a>Contact</a>
            </Link>
        </nav>
    );
};

export default Nav;
```

Here's my `Footer.js`:

```jsx
const Footer = () => {
    return (
        <footer>
            <p>&copy; 2023 My Website</p>
        </footer>
    );
};

export default Footer;
```

I've tried importing `Nav` in my `_app.js` file and wrapping the `Component` with it, but that defeats the purpose of having a single layout component.

What am I doing wrong?[/INST]