NextJS

NextJS - Tạo trang động

Written by huudoanh

Bây giờ chúng ta đã biết cách tạo một ứng dụng Next.js cơ bản với nhiều trang. Để tạo một trang, chúng ta cần phải tạo một file thực tế.

Tuy nhiên, trong một ứng dụng thực, chúng ta cần tạo các trang động để hiển thị nội dung động. Có nhiều cách tiếp cận để làm điều đó với Next.js.

Chúng tôi sẽ bắt đầu tạo các trang động bằng cách sử dụng các chuỗi truy vấn (query strings).

Chúng ta sẽ tạo một ứng dụng blog đơn giản. Nó có một danh sách tất cả các bài viết trên trang chủ (chỉ mục).

Khi bạn nhấp vào tiêu đề bài viết, bạn sẽ thấy nội dung của từng bài viết.

Cài đặt

Tải ứng dụng mẫu dưới đây để bắt đầu:

git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 3-create-dynamic-pages

Chạy ứng dụng với lệnh:

npm install
npm run dev

Mở trình duyệt web và truy cập http://localhost:3000.

Thêm danh sách bài viết

Trước hết, hãy thêm danh sách tiêu đề bài viết trong trang chủ pages/index.js.

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

const PostLink = props => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
);
export default function Blog() {
  return (
    <Layout>
      <h1>My Blog</h1>
      <ul>
        <PostLink title="Hello Next.js" />
        <PostLink title="Learn Next.js is awesome" />
        <PostLink title="Deploy apps with Zeit" />
      </ul>
    </Layout>
  );
}

Sau khi bạn thêm đoạn code trên, kết quả hiển thị như sau:

Truyền dữ liệu qua chuỗi truy vấn

Chúng ta sẽ truyền dữ liệu thông qua query string parameter. Trong trường hợp này truy vấn thông qua title

const PostLink = props => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
);

Tạo trang post

Bây giờ chúng ta cần tạo trang bài viết để hiển thị bài viết trên blog. Để làm điều đó, chúng ta cần lấy tiêu đề từ các chuỗi truy vấn.

Tạo một file pages/post.js và thêm nội dung sau:

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

const Page = () => {
  const router = useRouter();

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

export default Page;

Bây giờ trang của chúng ta như sau:

  • Chúng ta sử dụng useRouter function từ next/router trả về Next.js router object.
  • Trong trường hợp này chúng ta đang sử dụng router query object.
  • Do đó chúng ta sẽ nhận title với router.query.title

useRouter

Như bạn đã thấy, useRouter cho phép bạn truy cập đến router object bên trong page, đó là một React Hook.

Trong ví dụ sau, bạn có thể thấy useRouter được thêm vào một component khác với trang đã export:

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

const Content = () => {
  const router = useRouter();
  return (
    <>
      <h1>{router.query.title}</h1>
      <p>This is the blog post content.</p>
    </>
  );
};

const Page = () => (
  <Layout>
    <Content />
  </Layout>
);

export default Page;