Next.js 살펴보기 (Router, Layouts, Fetching, CSS) - 원스탑 튜터링 5주차

출처: Wikipedia

Next.js는 React의 서버 사이드 렌더링(SSR)을 쉽게 하도록 도와주는 프레임워크입니다. React는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다. CSR은 한 페이지만 화면에 띄웁니다. 그 후 사용자의 요청에 따라 필요한 부분만 다시 렌더링 합니다. 하지만 모든 정보를 처음에 다 불러오기 때문에 초기 로딩 시간이 길어집니다.

 

SSR은 서버에서 필요한 페이지를 완성한 후 이를 브라우저에 보냅니다. 처음 렌더링 된 html만 브라우저에 보내기 때문에 초기 로딩 시간이 짧습니다. 하지만 페이지를 요청할 때마다 정보를 다시 불러 와서, 사용자가 페이지를 이동하는 시간은 더 오래 걸립니다.

 

# 설치, 실행
npm install next
npx create-next-app

 

1️⃣ Router 비교

React Router

React는 React Router를 사용하여 SSR을 구현할 수 있습니다.

React Router: Declarative Routing for React

 

React Router를 설치합니다.

npm install react-router-dom

 

페이지를 이동할 수 있게 navigation을 만들어 봅시다.

// App.js

import { Route, Router } from "react-router-dom";
import About from "./routes/About";
import Home from "./routes/Home";

function App() {
  return (
    <Router>
      <div className="navigation">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

기존 html과 다른 점은 a 태그 대신 Link를 사용합니다. 주소를 href가 아니라 to로 연결합니다. 그 다음 페이지로 사용할 component를 Router 안에 Route로 넣어줍니다.

 

Next의 Nested Routes

Next는 pages 폴더 안에 페이지 파일을 생성하면 자동으로 route를 사용합니다. 즉 위에서 App.js의 Router를 만들지 않아도 됩니다.

// Next.js
import Link from 'next/link'

export default function App() {
  return (
    <>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </>
  )
}

이때 to가 아니라 href를 사용하고, Link 안에 문자열이 아니라 element나 component를 넣어야 합니다.

 

2️⃣ Layouts

네비게이션바 처럼 여러 페이지에서 중복으로 사용되는 component를 매번 다시 써주는 건 비효율적입니다. Layout은 이런 반복적인 노동을 줄여줍니다. Layout component를 아래처럼 만듭니다.

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

// 출처: next 공식 문서

 

그 다음 저 layout이 필요한 페이지를 Layout 태그로 감싸면 됩니다. 모든 페이지에 사용할 거면 _app.js에 Layout을 추가합니다. Layout이 사용된 페이지는 위의 코드처럼 Navbar, main, Footer가 공통으로 들어가게 됩니다.

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

// 출처: next 공식 문서

 

3️⃣ Data Fetching

Next.js에서 데이터를 가져올 때는 getStaticProps를 사용합니다. React에서 componentDidMount로 데이터를 가져오는 과정과 비슷합니다.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

// 출처: next 공식 문서

 

getStaticProps는 데이터를 가져오고 싶은 component 안에서 사용하면 됩니다. 

export default function Home({ movies }) {

  return (
    <ul>
      {movies.map((movie) => (
      	<li>{movie.title}</li>
      ))}
    </ul>
  )

  export async function getStaticProps(context) {
    const res = await fetch('https://.../movies')
    const movies = await res.json()

    return {
    	props: { movies }, // props로 movies 전달
    }
  }
}

 

4️⃣ CSS

CSS Modules

npx create-next-app을 하면 styles 폴더가 생성됩니다. 이 안에는 globals.css와 Home.module.css가 있는데요, global은 말 그대로 body, html, a 등 전체적으로 적용할 스타일이 설정되어 있습니다. Home.module은 index.js에 있는 Home에 적용되는 스타일입니다.

Next.js는 CSS Modules을 제공합니다. CSS Modules는 파일 별로 고유한 className을 사용할 수 있어서, 파일만 다르면 같은 className을 사용해도 됩니다. style이 필요한 page나 component 이름을 포함한 [name].module.css 파일을 만들고 import해서 사용합니다.

/* components/Button.modules.css */
.red {
  color: white;
  background-color: red;
}

// components/Button.js

// styles로 import한 css를 className으로 전달
import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      className={styles.red}
    >
      Destroy
    </button>
  )
}

 

styled-jsx

js 파일 안에 css를 작성하고 싶다면 React에서 사용하는 일반적인 방법이나 styled-jsx를 사용합니다. 

// 일반적인 방법

export default function Example() {
  return <p style={{ color: 'red' }}>Hello Next.js</p>
}

// styled-jsx

export default function Example() {
  return (
    <div>
      <p>Hello, Next.js</p>
      
      <style jsx>{`
        p {
          color: red;
        }
        div {
          background: blue;
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

styled-components와 비슷합니다. return하는 jsx 마지막에 <styled jsx></style>로 감싸서 작성합니다. 글로벌 스타일은 <style global jsx>를 사용합니다. 더 자세한 사용법은 아래를 참고하세요↓↓

 

GitHub - vercel/styled-jsx: Full CSS support for JSX without compromises

---

거의 대부분의 내용은 공식문서를 참고했습니다. 처음 사용해보는 거라 아직 혼란스러운데.. 역시 처음 시작할 땐 공식문서를 차분히 읽는 습관이 필요한 거 같습니다. 앞으로도 계속 새로운 걸 찾고 스스로 공부해야 할 테니까요😂

 

 

[참고 자료]

Getting Started | Next.js

Next.js 제대로 알고 쓰자

서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)