article

Saturday, October 30, 2021

Next.js Simple Navigation Page to Page using Link

Next.js Simple Navigation Page to Page using Link

pages/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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;

Related Post