Customizing The 404 Page React Next.js

หลายคนที่ก้าวเข้ามาใช้ Next.js แล้ว เมื่อมีการทำ Routing ก็จะเคยเจอว่า ถ้า Routing ที่เรากำหนดไว้ไม่มีอยู่จริงๆ ก็จะเจอหน้า 404 ที่เป็น default ของ Next ที่ทำไว้ให้เรา แบบนี้

ใน Next.js จะมี Feature ให้เราสามารถ custom หน้า 404 ได้ โดยสร้างไฟล์ชื่อว่า 404.js ให้อยู่ใน Folder pages

เมื่อมีการสร้าง pages/404.jsNext.js จะทำการ override default หน้า 404 ให้อัตโนมัติเลย

ในตัวอย่าง

• เริ่มจากสร้าง Project

mkdir next-customizing-404 && cd next-customizing-404

• สร้างไฟล์ package.json

npm init -y

• ติดตั้ง Next.js และ React

npm install react react-dom next

• เพิ่ม script ลงไปใน package.json

"scripts": {   
   "dev": "next",   
   "build": "next build",   
   "start": "next start" 
}

• ทดสอบ start server ด้วยคำสั่ง

npm run dev

• ต่อมาสร้าง Folder ชื่อว่า pages
• สร้างไฟล์ชื่อว่า index.js ใน folder pages และเขียน code

import Link from 'next/link';
export default () => {
   return (<div>
<h2> This is example "Automatic Static Optimization for 404" </h2>
<Link href="/profile">Go to profile page</Link>
</div>
   )
}

• สร้างไฟล์ชื่อว่า profile.jsใน folder pages และเขียน code

export default () => {
return (  <div><h2>This is profile page</h2></div>)
}

• หลังจากนั้นเราจะได้ 2 หน้า และเมื่อเรากรอก Routing ใหม่ที่ไม่เคยมีมาก่อนจะเจอหน้า 404 ดังภาพ

• เรามา custom หน้า 404 ด้วยการสร้างไฟล์ 404.js ใน folder pages และเขียน code

export default () => {
return (<div><h2>ไม่พบหน้าจอที่คุณต้องการ</h2></div>)
}

• มาดูผลลัพธ์กัน

เย้ๆๆๆ จบแล้ววว ความจำฉันสั้น ขอจดไว้บันทึกความทรงจำตัวเอง ผิดพลาดประการใด ขออภัยมา ณ ที่นี้ด้วยย เขียนโค้ตมันก็สนุกดีน๊าา

Source code: https://github.com/phatpan/next-customizing-404

Reference: https://nextjs.org/blog/next-9-3#automatic-static-optimization-for-404