설치 및 세팅은 공식홈페이지에 잘 설명되어 있어서 생략한다.
- Run dev mode:
npm run dev
Fetch Data
isomorphic-unfetch 와 axios는 둘다 클라이언트와 서버의 환경 모두에서 작동한다. 따라서 둘 중 하나의 패키지를 설치한다.
npm i isomorphic-unfetchoraxios
import styled from 'styled-components';
import fetch from 'isomorphic-unfetch';
function Home({ bpi }) {
return (
<div>
<Prices bpi={bpi} />
</div>
);
}
export async function getStaticProps() { // (*)
const res = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
const data = await res.json();
return {
props: {
bpi: data,
},
};
}
export default Home;
Styled-components 사용하기
npm i styled-componentsnpm i -D babel-plugin-styled-components- Create
.babelrcfile
.babelrc File
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}이 때, 스타일링이 되지 않은 컨텐츠의 flash를 막기 위해서
_document.js수정한다.
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'; // (*)
class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet(); // (**) Below
const page = renderPage(App => props =>
sheet.collectStyles(<App {...props} />)
);
const styleTags = sheet.getStyleElement();
return { ...page, styleTags };
}
render() {
return (
<Html lang="en">
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
{this.props.styleTags}
</Head>
<body style={{ fontFamily: 'Poppins' }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
그리고 Layout 컴포넌트에 글로벌스타일을 입히고 원래 사용하던대로 styled-components를 사용하면 된다.
_document.js
_document.js는 html body와 같은 기본 태그들의 속성을 지정할 때 사용된다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en"> // (*)
<Head>
// script tags or link tags
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument_app.js
Next.js는 App component를 처음 페이지를 initializing 할 때 사용된다. _document.js와 _app.js 모두 page폴더안에 위치시킨다.
import '../src/styles/reset.css';
import Head from 'next/head';
function MyApp({ Component, pageProps }) {
<title>BitRate</title>;
return (
<>
<Head>
<title>BitRate</title>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Deploy
Vercel을 이용하면 아주 쉽게 deploy를 할 수 있다. SSR을 사용하는 next.js의 경우에는 netlify보다 vercel이 훨씬 빠르고 편리한 것 같다.
Hello World.