[Next] Patterns / Fetching Data / Redirect & Rewrite / SSR

1. Patterns

Custom App Component를 사용할 때 layout 패턴을 사용할 수 있다. 

 

component 폴더 밑에 Layout.js 파일을 만든다.

Layout 컴포넌트에는 여러 페이지에서 반복적으로 사용되는 컴포넌트들을 넣을 수 있고, 스타일도 줄 수 있다. 

 

children은 리액트가 제공하는 prop으로 하나의 컴포넌트를 또 다른 컴포넌트 안에 넣을 때 사용할 수 있다.

import NavBar from "./NavBar";

export default function Layout({ children }) {
  return (
    <>
      <NavBar />
      <div>{children}</div>
    </>
  );
}

MyApp에서 fragment를 우리의 Layout component로 바꾼다.

Layout에 어떤 것을 넣더라도, Layout의 children에서 보여지게 된다.

 

global로 import해야 할 것이 많기 때문에 너무 큰 리액트 컴포넌트(App)를 사용하기 보다는 Layout 컴포넌트에 만들어주는 것이다. 

import Layout from "../components/Layout";

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

NextJS가 제공하는 head component가 있다.

import Head from "next/head";​

 

2. Fetching Data

public 디렉토리 안에 있는 파일을 찾아올 경우 슬래시하고 파일 이름만 써주면 된다.

/vercel.svg

<img src="/vercel.svg" />

 

3. Redirect and Rewrite

NextJS의 configuration파일에 redirect와 rewrite를 작성한다. 

/** @type {import('next').NextConfig} */

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/contact",
        destination: "/form",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    ...
  },
};

module.exports = nextConfig;

Redirection 

async redirects하고 array를 return한다. 

이 array는 object를 가지며, redirection에 필요한 것은 이제 전부다. 

 

만약 사용자가 /contact로 이동하면 form이라는 destination으로 보내진다. 

참고로 redirection이 permanent(영구적)인지 아닌지에 따라서 브라우저나 검색 엔진이 이 정보를 기억하는지의 여부가 결정이 된다.

 

Pattern matching이 지원된다.

 

source: "/old-blog/:path",

destination: "new-blog/:path",

위와 같은 경우 URL에 old-blog/123이라고 쓰고 엔터를 누르면 new-blog/123으로 이동한다.

 

source: "/old-blog/:path*",

destination: "new-blog/:path*",

만일 뒤에 별을 붙이면 모든 것을 catch할 수 있다.

old-blog/123/comment/12312이라고 쓰고 엔터를 누르면 new-blog/123/comment/12312으로 이동한다. 

 

redirect를 이용해서 한 페이지에서 다른 페이지로 이동하게 할 수도 있고 아예 다른 URL의 웹 사이트로 이동할 수도 있다.

 

Rewrites 

/** @type {import('next').NextConfig} */

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    ...
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

async rewrites를 연다. rewrites도 똑같이 array를 return하며 그 안에는 여러 object들이 들어간다.

rewrites는 redirects와 다르다.

 

redirects는 특정 URL로 갈 때 유저가 URL이 바뀌는 걸 볼 수 있다.

rewrites는 유저를 redirect시키기는 하지만 URL이 변하지 않는다. 

NextJS가 request를 masking한다는 것이다. 

 

환경변수에 API 키를 숨길 수 있다. 

.env형식의 environment파일을 만들어서 API_KEY="!@#$%^"를 적어주고 다음과 같이 꺼내서 사용하면 된다. 

const API_KEY = process.env.API_KEY;

git ignore에 .env파일이 꼭 포함시켜야 한다. 

 

// index.js
const { results } = await (await fetch(`/api/movies`)).json();

/api/movies라는 가짜 fetching URL이 movies 정보를 받아온다.

 

Redirects

• URL변경됨
• 들어오는 request 경로를 다른 destination 경로로 리다이렉트

redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수

source: 들어오는 request 경로 패턴 (request 경로)

destination: 라우팅하려는 경로 (redirect할 경로)

permanent: true인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache하도록 지시하는 308 status code를 사용하고, false인 경우 일시적이고 cache되지 않은 307 status code를 사용

 

Rewrites

• URL변경되지 않음
• 들어오는 request 경로를 다른 destination 경로에 매핑

rewrites은 URL 프록시 역할을 하고 destination 경로를 mask하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 함

 

4. Server Side Rendering

NextJS의 getServerSideProps function은 server side render에 대한 선택권을 준다.

 

NextJS는 어플리케이션을 pre-render하고 컴포넌트의 초기 상태로서 HTML을 준다. 

loading을 render한다는 뜻이다.

 

하지만 fetch같은 server에서 일어나는 data 관련된 작업을 모두 한 다음에 페이지를 render하고 싶은 경우도 있다.

이런 경우에는 getServerSideProps라는 function을 export하면 된다.

함수명과 export가 제일 중요하다. 

 

getServerSideProps에 쓰이는 코드는 client쪽이 아닌 server쪽에서만 작동하게 된다.

이 함수를 이용한다면 rewites를 사용하지 않고 API key를 숨기는 것도 가능하다. 

 

export async function getServerSideProps() {
  const { results } = await (
    await fetch(`http://localhost:3000//api/movies`)
  ).json();
  return {
    props: {
      results,
    },
  };
}

getServerSideProps는 object를 하나 반환하는데, 이 object는 props라고 불리는 key가 있다. 

이 props안에 원하는 데이터를 넣으면 된다.

 

이 데이터를 가져오기 위해서는 아래와 같이 작성하면 된다.

export default function Home({ results })

 

getServerSideProps는 server에서 실행되고 반환되는 것은 props로써 page에게 주게 된다.

원한다면 server side를 통해 props를 page를 보낼 수 있다는 뜻이다.

 

이게 App 컴포넌트에 pageProps가 필요한 이유다.

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

NextJS가 Home을 받고 render하기 위해 Component 자리에 넣는다.

NextJS는 getServerSideProps를 호출하고 반환된 props를 pageProps 자리에 넣는다.

 

이제 이 페이지는 100% 서버사이드에서 render된다. 

loading이 일어나지 않는다. 즉, API가 돌아오기 전 까지 화면에 아무것도 안 보인다는 뜻이다. 

소스 코드를 보면 HTML안에 리액트 컴포넌트의 render 결과가 들어있다. 

 

server side rendering. 즉, 데이터가 유효할 때 화면이 보여지는 것과 loading 화면을 보여준 다음에 데이터를 받는 게 좋은지 선택해야 한다.

 

NextJS 자동으로 props들을 넣어줄거고 리액트가 받아서 흡수(hydration)한다고 말할 수 있다. 

리액트가 다시 주도권을 쥐고 result 이용해 무엇이든 할 수 있는 것이다. 

export default function Home({ results })

타입스크립트 구현 코드

 

---

📌 아래 강의의 내용을 정리한 글입니다.

• 노마드 코더 - NextJS 시작하기