NextJS - 1 (레이아웃 만들기)

J-USER·2021년 7월 2일

React nextjs

NextJS

목록 보기

2/6

Next JS 시작하기

npx create-next-app

_app.js

client에서 띄우길 바라는 전체 컴포넌트의 레이아웃
최초 실행됨.
페이지 전환시 레이아웃 유지
페이지 전환시 상태값 유지
componentDidCatch 를 이용해서 커슽첨 에러 핸들링 가능
추가적 데이터를 페이지로 주입 가능
글로벌 CSS를 이곳에 선언

import '../styles/globals.css'
import 'semantic-ui-css/semantic.min.css'
import Footer from '../src/component/Footer'
import Top from '../src/component/Top';

function MyApp({ Component, pageProps }) {
  // Component : 현재 페이지 의미 , pageProps : 데이터 케치 메서드로 가져온 초기 객체
  return  <div>
  <Top />
  <Component {...pageProps} />
  <Footer/>
  </div>
}

export default MyApp;

공통된 어플리케이션 로직이 필요하다면, _app.js를 활용해야함!!!

_document.js

시멘틱 태그를 구성하기 위해 _app.js에서 구성한 html body가 어떤 형태로 들어갈지 구성하는 곳
서버에서만 렌더링되고 onclick 같은 것은 작동 X 그리고 CSS도 작성 X
nextJS 페이지들은 마크업 정의를 건너뛰고 페이지를 만들기 때문에 아래의 HTML을 수정하려 할때 이 파일로 수정 해야함

import Document,{ Html, Head, Main, NextScript } from "next/document";

function MyDocument (){

    return (
      <Html lang="ko">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
}
MyDocument.getInitialProps = Document.getInitialProps;
//  각 페이지마다 사전에 불러와야할 데이터를 서버에서 미리 처리하도록 도와줌.

MyDocument.renderDocument = Document.renderDocument;
//  static html를 구성하기 위한 _app.js에서 구성한 Html body가 어떤 형태로 들어갈지 구성
export default MyDocument;

_document.js는 SPA에서 시작점이 되는 index.html이라고 생각하면 된다.

NextScript 🤔

NextScript는 context._documentProps에서 온 파일의 리스트를 받고 아래와 같이 리턴을 하게 해주는 컴포넌트 입니다. 👇

<script
        key={file}
        src={`${assetPrefix}/_next/${file}`}
        nonce={this.props.nonce}
        async
      />

index.js

Root Page - /로 시작되는 경로의 페이지 구성을 나타낸다.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import axios from 'axios'
import {useEffect, useState} from 'react'
import ItemList from '../src/component/ItemList'
import { Divider, Header } from 'semantic-ui-react'

export default function Home() {
  const API_URL = "http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline"
  const [list,setList] = useState([]);
  useEffect(() => {
    axios.get(API_URL)
    .then((res) =>{
    setList(res.data)
    console.log(res.data)
    })
  }, [])
  return (
    <div>
      <Head>
        <title>HOME | JUSER</title>
      </Head>
      <Header as ="h3" style={{paddingTop : 40}}>Best Item</Header>
      <Divider />
      <ItemList list = {list.slice(0,9)}/>
      <Header as ="h3" style={{paddingTop : 40}}>New Item</Header>
      <Divider />
      <ItemList list = {list.slice(9)}/>
    </div>
  )
}