NextJS

NextJS - Làm sạch URL với Định tuyến động

Written by huudoanh

Trong bài học trước, chúng ta đã học cách tạo các trang động với các chuỗi truy vấn (query string). Liên kết của một bài viết trên blog sẽ trông như sau:

http://localhost:3000/post?title=Hello%20Next.js

Như bạn thấy, URL trên không thực sự thân thiện nhất là với việc SEO web. Một URL sạch trông như sau:

http://localhost:3000/p/hello-nextjs

Chuẩn bị

Trước tiên, chúng ta cần một ứng dụng Next.js đơn giản để học. Hãy  tải xuống ứng dụng ví dụ sau:

git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 4-clean-urls

Và bạn có thể chạy nó với lệnh:

npm install
npm run dev

Bây giờ bạn có thể truy cập ứng dụng bằng cách điều hướng đến http://localhost:3000/.

Định tuyến động

Ở đây chúng ta sẽ sử dụng tính năng Dynamic Routing của NextJS, nó cho phép bạn xử lý định tuyến động trong /pages

Bước 1: tạo định tuyến động đầu tiên bằng cách thêm một trang mới pages/p/[id].js sau đó thêm đoạn code sau:

import { useRouter } from 'next/router';
import Layout from '../../components/MyLayout';

export default function Post() {
  const router = useRouter();

  return (
    <Layout>
      <h1>{router.query.id}</h1>
      <p>This is the blog post content.</p>
    </Layout>
  );
}

Với đoạn code trên, thay vì sử dụng định tuyến tĩnh giống như /about nó sẽ xử lý các định tuyến phía sau /p/. Ví dụ /p/hello-nextjs

Sử dụng dấu ngoặc vuông [] cho tên của page biến nó trở thành một định tuyến động.

Khi tạo định tuyến động, chúng ta đã thêm id giữa các dấu ngoặc []. Đây là tên của thông số truy vấn mà trang nhận được. Vậy với /p/hello-nextjs query object sẽ là { id: 'hello-nextjs'} và chúng ta có thể truy cập nó với useRouter().

Bây giờ chúng ta sẽ thêm nhiều link sử dụng định tuyến động mới. thêm đoạn code sau cho pages/index.js

import Layout from '../components/MyLayout';
import Link from 'next/link';

const PostLink = props => (
  <li>
    <Link href="/p/[id]" as={`/p/${props.id}`}>
      <a>{props.id}</a>
    </Link>
  </li>
);

export default function Blog() {
  return (
    <Layout>
      <h1>My Blog</h1>
      <ul>
        <PostLink id="hello-nextjs" />
        <PostLink id="learn-nextjs" />
        <PostLink id="deploy-nextjs" />
      </ul>
    </Layout>
  );
}

Hãy xem đoạn code sau:

const PostLink = props => (
  <li>
    <Link href="/p/[id]" as={`/p/${props.id}`}>
      <a>{props.id}</a>
    </Link>
  </li>
);

Bên trong phần từ <Link> href prop bây giờ là đường dẫn của trang trong thư mục page và as là URL để hiển thị trên thanh URL của trình duyệt.