1. Thực hiện component Header.js

C:\Users\Administrator\Desktop\fusejs\test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>Bước 1: Thực hiện component Header</h2>
	<pre>
		const styles = {
		  a: {
		    marginRight: 10,
		  }
		}
	</pre>
</body>
</html>

C:\Users\Administrator\Desktop\fusejs\components\Header.js

import Link from 'next/link';
const styles = {
  a: {
    marginRight: 10,
  }
}
function Header() {
  return (
    <div>
      <Link href="/">
        <a style={styles.a}>Home</a>
      </Link>
      <Link href="/about">
        <a style={styles.a}>About</a>
      </Link>
    </div>
  )
}
export default Header;

C:\Users\Administrator\Desktop\fusejs\pages\index.js

import React from 'react';
import Header from '../components/Header';
const IndexPage = () => {
  return (
    <div>
      <Header />
    </div>
  )
}

export default IndexPage;

Previous-------------- Start Thực hiện một dự án sử dụng Dynamic import && fuse.js nextjs --------Next2. Thực hiện Dynamic import (ok)

Last updated 4 years ago

Was this helpful?