Next.js Simple Navigation Page to Page using Link

Next.js Simple Navigation Page to Page using Link

pages/index.js

//pages/index.js
import Link from "next/link";
 
const Index = () => <div>
 
  <h3>Next.js Simple Navigate page to page using link </h3>
  <br />
 
  <Link href="/">
    <a style={{ marginRight: 15 }}>Home</a>
  </Link>
  <Link href="/about">
    <a style={{ marginRight: 15 }}>About</a>
  </Link>
  <Link href="/contact">
    <a>Contact</a>
  </Link>
 
  <h1>Home page!</h1>
</div>
 
export default Index;

pages/about.js

//pages/about.js
import Link from "next/link";
 
const About = () => <div>
 
  <h3>Next.js Simple Navigate page to page using link </h3>
  <br />
 
  <Link href="/">
    <a style={{ marginRight: 15 }}>Home</a>
  </Link>
  <Link href="/about">
    <a style={{ marginRight: 15 }}>About</a>
  </Link>
  <Link href="/contact">
    <a>Contact</a>
  </Link>
 
  <h1>About page!</h1>
</div>
 
export default About;

pages/contact.js

//pages/contact.js
import Link from "next/link";
 
const Contact = () => <div>
 
  <h3>Next.js Simple Navigate page to page using link </h3>
  <br />
 
  <Link href="/">
    <a style={{ marginRight: 15 }}>Home</a>
  </Link>
  <Link href="/about">
    <a style={{ marginRight: 15 }}>About</a>
  </Link>
  <Link href="/contact">
    <a>Contact</a>
  </Link>
 
  <h1>Contact page!</h1>
</div>
 
export default Contact;