[Next.js] Pages

Narathidsp
Dec 18, 2022

--

การเพิ่มหน้าใหม่

ทำได้ง่ายมากๆแค่ เพิ่ม file ใหม่เช่นเราต้องการเพิ่มหน้า Shop

เราแค่ต้องสร้าง File shop.js ใน folder pages และ ใช้ code ตามนี้

export default function Shop(){
return <div>Shop</div>
}

เราก็จะสามารถเข้าถึงหน้า
http://localhost:3000/shop
ได้แล้ว

การใช้ Next Link

ให้ Import Link มาก่อน แล้วใช้ Tag Link ในการใช้งาน

import Link from 'next/link';
export default function Index() {
return (
<div>
<ul>
<li><Link href="/">Index</Link></li>
<li><Link href="/about_us">About Us</Link></li>
<li><Link href="/shop">Shop</Link></li>
</ul>
</div>
);
}

การใช้ Next Head

ใช้แทน header

import Head from 'next/head';
export default function Index() {
return (
<div>
<Head>
<title>Index</title>
</Head>
</div>
);
}

--

--