Nhập khẩu Thành phần trong NextJS

Bạn có thể nhập khẩu không chỉ các tệp dữ liệu, mà còn cả các thành phần tương tự như cách chúng ta vẫn thường làm khi làm việc với React thông thường. Hãy xem cách thức hoạt động.

Đầu tiên, hãy đưa ra một số quy ước. Như bạn đã biết, trong thư mục src/app chứa các trang của trang web. Hãy đặt các thành phần con trong thư mục src/comp.

Bây giờ hãy kết nối một thành phần con với một trang nào đó. Giả sử chúng ta có một trang như sau:

export default function Test() {
	return <>
		<h1>Test</h1>
	</>;
}

Giả sử chúng ta có thành phần con sau:

export default function Child() {
	return <p>
		child
	</p>;
}

Hãy nhập khẩu thành phần con của chúng ta vào trang của chúng ta:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
	</>;
}

Thực hiện chèn thành phần đã nhập khẩu. Để làm điều này, hãy sử dụng thẻ với tên biến của thành phần:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child />
	</>;
}

Tạo một vài thành phần con. Nhập khẩu chúng vào các trang của bạn.