tiktok นับยอดวิวยังไง

ใน Next.js, คุณสามารถทำการ redirect หน้าเว็บไปยัง URL อื่นๆ ได้โดยใช้สองวิธีหลักคือ:

1. Client-Side Navigation: สำหรับการเปลี่ยนเส้นทางเพียงแค่เปลี่ยนหน้าโดยไม่ต้องโหลดหน้าใหม่ ใช้ next/router เพื่อนำทางฝั่งไคลเอนต์ (client-side) ไปยัง URL ปลายทางที่คุณต้องการ.

2. Server-Side Redirect: สำหรับการ redirect ที่ต้องการให้เซิร์ฟเวอร์ส่ง response โดยตรงให้ client ใช้ context ใน getServerSideProps หรือ getServerSideProps ภายใต้ getInitialProps เพื่อทำการ redirect.

นี่คือวิธีการใช้ทั้งสองแบบ:

Client-Side Navigation:

ในตัวอย่างนี้เราจะใช้ next/router เพื่อนำทางไปยัง URL อื่นๆ บนฝั่งไคลเอนต์:

import { useRouter } from 'next/router';

function RedirectToAnotherPage() {
  const router = useRouter();

  // ใช้ router.push เพื่อ redirect ไปยัง URL อื่น
  const redirectToPage = () => {
    router.push('/new-page'); // เปลี่ยน '/new-page' เป็น URL ที่คุณต้องการ redirect
  };

  return (
    <div>
      <button onClick={redirectToPage}>Redirect to Another Page</button>
    </div>
  );
}

export default RedirectToAnotherPage;

Server-Side Redirect:

การ redirect ที่เกิดขึ้นในฝั่งเซิร์ฟเวอร์ (server-side) สามารถทำได้โดยการใช้ context ใน getServerSideProps หรือ getServerSideProps ภายใต้ getInitialProps:

ใน getServerSideProps:

export async function getServerSideProps(context) {
  // ใช้ context.res.writeHead เพื่อทำการ redirect
  context.res.writeHead(302, {
    Location: '/new-page', // เปลี่ยน '/new-page' เป็น URL ที่คุณต้องการ redirect
  });
  context.res.end();

  // คืนค่าอะไรก็ได้ที่ไม่สำคัญ แต่จะไม่ถูกใช้
  return { props: {} };
}

หรือใน getInitialProps:

class RedirectToAnotherPage extends React.Component {
  static async getInitialProps({ res }) {
    // ใช้ res.writeHead เพื่อทำการ redirect
    res.writeHead(302, {
      Location: '/new-page', // เปลี่ยน '/new-page' เป็น URL ที่คุณต้องการ redirect
    });
    res.end();
  }

  render() {
    // ส่วนนี้จะไม่ถูกใช้งาน แต่ไม่มีผลต่อการ redirect
    return null;
  }
}

export default RedirectToAnotherPage;

ต้องการระวังเรื่องการใช้ res.writeHead ใน Next.js เนื่องจากมันทำการออก header สำหรับ response และจบการทำงานของ request จึงต้องครอบคลุมกรณีที่คุณไม่ต้องการสิ่งนี้โดยการใช้ return null; ใน render ของคลาสหรือการคืนค่า return { props: {} }; ใน getServerSideProps เพื่อป้องกันข้อผิดพลาดที่เกิดขึ้นหากไม่ได้คืนค่าอะไรก็ตามในฟังก์ชัน getServerSideProps หรือ getInitialProps.