1. 라이브러리 설치
- npm init
- npm i next
- npm i react react-dom styled-components
- react (View를 만들기위한 라이브러리)
- react-dom (UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리)
- styled-components (css를 입히기위한 라이브러리)
2. 패키지 생성
폴더 구조
- components
- pages
- public > img
- styles
3. 파일 생성
components > AppLayout.js
- 특정 컴포넌트끼리 공통적인 부분을 제어해 준다.
import React from 'react'; const AppLayout = ({ children }) => { return ( <> <div>공통부분</div> { children } </> ); }; export default AppLayout;
pages > index.js
- Welcome 페이지 생성
- 공통 부분을 추가하기 위해 AppLayout컴포넌트 태그를 사용
import React from 'react'; import AppLayout from '../components/Applayout'; const Home = () => { return ( <AppLayout> <div>Hello, Next!</div> </AppLayout> ); }; export default Home;
pages > _app.js
- 전체 공통적인 부분을 제어해 준다.
import Head from 'next/head'; // head를 조작하기 위한 컴포넌트 import '../styles/global.css' const App = ({ Component }) => { return ( <> <Head> <meta charSet='utf-8' /> <meta name='viewport' content='initial-scale=1.0, width=device-width' /> <title>A-SUPPORTER</title> </Head> <Component /> </> ); }; export default App;
pages > _document.js
- css를 rerender시켜주기 위한 파일
import Document, { Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; export default class MyDocument extends Document { static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; } render() { return ( <Html> <Head> {this.props.styleTags} </Head> <body> <Main /> <NextScript /> </body> </Html> ); } }.babelrc (경로:root)
- css를 rerender시켜주기 위한 파일
{ "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }
styles > global.css
- 전체 공통 css를 적용하는 파일
html, body { padding: 0; margin: 0; } * { box-sizing: border-box; } a { text-decoration: none; } li { list-style: none; }
오늘도 공부 📖🌙