Pages

next.js는 결국 페이지를 만들어 사용하는 프레임워크이다.

리액트 컴포넌트를 내보내고
해당 컴포넌트를 Pages 디렉토리 안에 넣으면 페이지를 만들 수 있다.

그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있다.

내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있다.

• 헤더 컴포넌트 생성 및 사용

//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;

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

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