Next.js 프로젝트

Today

Total

Notice

Recent Posts

Recent Comments

Link

관리 메뉴

DEVLOG

Next.js 프로젝트 :: 세팅 본문

frontend/next.js

Next.js 프로젝트 :: 세팅

meroriiDev 2023. 6. 22. 14:31

728x90

📖 목차

기존에 포트폴리오 사이트를 Next.js를 사용하여 진행했는데 api 붙일것도 없고,, 안에 내용도 너무 단조로워서 Next.js 기술을 조금 더 익히기 위해 간단한 프로젝트를 진행해보기로 했다!

🎈 주제정하기

api를 붙일만한 프로젝트로 고민하다가 이전에 잠깐 사용해보았던 TMDB API에 tving사이트 디자인을 더해 영화 추천 사이트를 제작해보려고 한다!

🎈 사용기술

next.js + typescript 기반으로 페이지를 만들고 스타일 작업은 styled-components를 이용해보려고 한다.

 "next": "13.0.7",
 "react": "18.2.0",
 "react-dom": "18.2.0",
 "styled-components": "^5.3.6"

🎈 기본세팅하기

_app / _document

_app은 가장 먼저 실행되는 컴포넌트로 페이지에 적용할 공통 레이아웃의 역할을 한다. 주로 모든 컴포넌트에 공통으로 적용할 속성을 관리한다.

_app.tsx

import type { AppProps } from "next/app";
import Head from "next/head";
import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>meroriiving</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

_document는 _app 다음에 실행되며, 공통으로 활용할 <head>나 <body>태그 안에 들어갈 내용을 커스텀할 때 활용한다.
styled-components는 페이지를 불러올 때 HTML만 가져오고, 스타일이 적용되어 있지 않아 서버에서 미리 HTML을 마크업할때 스타일까지 입히려면 _document에 추가해주어야한다.

_document.tsx

import Document, {DocumentContext} from 'next/document'
import {ServerStyleSheet} from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: [
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ]
      }
    } catch (error) {
      throw error
    } finally {
      sheet.seal()
    }
  }
}

export default MyDocument

next.config.js

최초 서버 사이드에서 렌더링 이후 클라이언트 사이드 렌더링으로 라우팅을 하게 된다. 이 때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 서로 달라 에러가 발생하게 된다. (Prop className did not match) 이를 방지하기 위해 이전에는 styled-components 바벨 플러그인을 설치해야했다.

그러나 nextjs 12.1버전 이상부터는 babel-plugin-styled-components를 사용하지 않아도 되고, next.config.js에 해당 코드를 추가해주면 된다.

compiler: {
  styledComponents: true
},

🎈 구조

├──public
├──src
│  ├── common
│  │   ├── api.ts
│  │   └── util.ts
│  ├── components
│  └── pages
│      ├── detail
│      │   └── [id].tsx
│      ├── _app.tsx
│      ├── _document.tsx
│      └── index.tsx
└──styles

메인페이지와 상세페이지, 레이아웃을 적용해서 기본구조를 세팅했다.

👉 Next?

이후에는 TMDB를 이용해서 데이터를 받아올 예정이다!