NextJS

NextJS – Sử dụng Share Component

Written by huudoanh

Chúng ta đã biết cách tạo một page bằng cách export một React component và đặt component đó vào thư mục pages.

Trong bài học này, chúng ta sẽ tạo một Header component và sử dụng nó trong nhiều page. Sau đó, chúng ta sẽ xem xét triển khai một Layout component và xem cách nó có thể giúp chúng ta khởi tạo giao diện cho nhiều trang.

Thiết lập

Trong bài học này, 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 sau:

git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 2-using-shared-components

Sau đó chạy lệnh

npm install
npm run dev

Bây giờ bạn truy cập ứng dụng http://localhost:3000

Tạo Header Component

Thêm đoạn code sau vào file components/Header.js

import Link from 'next/link';

const linkStyle = {
  marginRight: 15
};

const Header = () => (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
);

export default Header;

Component này chứa hai liên kết đến các page có sẵn trong ứng dụng. Chúng ta cũng đã style cho liên kết một chút để dễ nhìn.

Sử dụng Header Component

Tiếp theo, import component này vào các page cần sử dụng Header Component. Với page index.js sẽ trông như sau:

import Header from '../components/Header';

export default function Index() {
  return (
    <div>
      <Header />
      <p>Hello Next.js</p>
    </div>
  );
}

Bạn có thể làm tương tự với page about.js

Kết quả như sau:

nextjs header component

Thư mục chứa Component

Chúng ta không cần phải đặt các component vào một thư mục đặc biệt nào đó. Trong NextJs chỉ có hai thư mục đặc biệt là /pages/static

Bạn cũng có thể tạo component bên trong thư mục pages. Trong bài này chúng ta không làm như vậy bởi vì chúng ta không cần tạo một URL đến Header component.

Layout Component

Trong ứng dụng của chúng ta, chúng ta sẽ sử dụng một style chung trên nhiều page khác nhau. Với mục đích này, chúng ta có thể tạo một Layout component chung và sử dụng nó cho từng trang.

Thêm đoạn code sau vào components/MyLayout.js:

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
);

export default Layout;

Sau đó chúng ta có thể sử dụng Layout này trong các trang như sau:

// pages/index.js

import Layout from '../components/MyLayout';

export default function Index() {
  return (
    <Layout>
      <p>Hello Next.js</p>
    </Layout>
  );
}
// pages/about.js

import Layout from '../components/MyLayout';

export default function About() {
  return (
    <Layout>
      <p>This is the about page</p>
    </Layout>
  );
}

Bây giờ bạn truy cập lại ứng dụng http://localhost:3000 xem nó như thế nào.

Rendering Child Components

Nếu bạn xoá đoạn mã {props.children} trong components/MyLayout.js, Layout sẽ không thể render nội dung bên trong Layout element:

  return (
    <Layout>
      <p>This is the about page</p>
    </Layout>
  );
}

Đây chỉ là một cách để tạo một Layout component. Dưới đây là một số phương pháp khác để tạo Layout component:

Phương pháp 1 – Layout như một Higher Order Component

// components/MyLayout.js

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const withLayout = Page => {
  return () => (
    <div style={layoutStyle}>
      <Header />
      <Page />
    </div>
  );
};

export default withLayout;
// pages/index.js

import withLayout from '../components/MyLayout';

const Page = () => <p>Hello Next.js</p>;

export default withLayout(Page);
// pages/about.js

import withLayout from '../components/MyLayout';

const Page = () => <p>This is the about page</p>;

export default withLayout(Page);

Phương pháp 2 – Nội dung của page như một prop

// components/MyLayout.js

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.content}
  </div>
);

export default Layout;
// pages/index.js

import Layout from '../components/MyLayout.js';

const indexPageContent = <p>Hello Next.js</p>;

export default function Index() {
  return <Layout content={indexPageContent} />;
}
// pages/about.js

import Layout from '../components/MyLayout.js';

const aboutPageContent = <p>This is the about page</p>;

export default function About() {
  return <Layout content={aboutPageContent} />;
}

Sử dụng các Component

Chúng ta đã đề cập đến hai trường hợp sử dụng cho các Component được chia sẻ:

  1. Common header components.
  2. Layouts.

Bạn có thể sử dụng các Component để style, tạo layout cho page và bất kỳ tác vụ nào bạn muốn. Ngoài ra, bạn có thể import các Component từ NPM và sử dụng chúng.