$npm init
$npm install next react react-dom
{
"scripts":{
"dev":"next",
"build":"next build",
"start":"next start"
}
}
import Link from "next/link";
import Navbar from "./Navbar";
const Layout = (props) => (
<div>
<Navbar />
{props.children}
</div>
);
export default Layout;
then
wrap everything with Layout component
import Navbar from "./Navbar";
import Head from "next/head";
const Layout = (props) => (
<div>
<Head>
<title></title>
</Head>
<Navbar />
{props.children}
</div>
);
export default Layout;
Layout을 심어놓은 모든 컴포넌트는 같은 스타일의 타이틀을 가지게 된다.
npm install isomorphic-unfetch
import Fetch from "isomorphic-unfetch";
import Layout from "../components/Layout";
const Index = (props) => (
<Layout>
<div>
<h1>Welcome to here</h1>
{props.object key.필요한 value의 key값}
</div>
</Layout>
);
Index.getInitialProps= async function(){
const res = await fetch("url");
const data = awaite res.json();
return{
object key : data
}
}
export default Index;
compnent name.getInitialProps = async() =>{
const res = await fetch("주소");
const json = await res.json();
return{
starts: json.stargazers_count
}
}