NextJS/Link, Component, Router - Only Code

(Hello Page 만들기-https://ongamedev.tistory.com/498- 코드에서 이어집니다.)

mkdir components && cd "$_"
vi header.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Link from 'next/link'
const linkStyle={marginRight: 15}
export default () => (
 	<div>
		<Link href="/">
			<a style={linkStyle}> Home </a>
		</Link>
		<Link href="/admin">
			<a style={linkStyle}> Admin </a>
		</Link>
	</div>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

vi layout.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Header from '/components/header'

const layoutStyle = {
	margin: 10,
	padding: 10,
	border: '1px soild #DDD'
}

export default (props) => (
	<div style={layoutStyle}>
		<Header />
		{props.children}
	</div>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

cd .. && cd pages && mkdir admin && cd "$_"
vi index.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Layout from '/components/layout'
import Link from 'next/link'

const MenuLink = (props) => (
	<li>
		<Link href={{
			pathname: '/admin/menu',
			query: {title:props.title}
		}}>
			<a>{props.title}</a>
		</Link>
	</li>
)

export default () => (
	<Layout>
		<h1> Admin Menu </h1>
		<ul>
			<MenuLink title="Dashboard" />
			<MenuLink title="Management" />
		</ul>
	</Layout>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

vi menu.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Layout from '/components/layout'
import { withRouter } from 'next/router';

const Menu = ({router:{query}}) => {
	if(query.title == "Dashboard"){
		return(
		<Layout>
			<h1>{query.title}</h1>
		</Layout>
		)
	}else if(query.title == "Management"){
		return(
		<Layout>
			<h1>{query.title}</h1>
			<p> <Link href="https://ongamedev.tistory.com/499">read detail</Link> </p>
		</Layout>
		)
	}
}
export default withRouter(Menu)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

cd .. && cd ..
npm run dev

(*full source code link)