NextJS Routing하기

<aside>

NextJS 13 ⇒ url과 페이지를 만들고 싶으면 app 폴더안에 폴더만들고 그 안에 page.js넣고 그 안에 레이아웃 넣기 app 폴더안의 폴더명 ⇒ url명

폴더명으로 routing을 한다

</aside>

1. app/page.tsx

전역 상태를 관리한다

eg.

// 하나의 blueprint 모든 페이지에 관여한다.
import Layout from "../components/Layout";
import "../styles/globals.css";
// NextJS로 앱을 만들 때는 global css 파일을 import 할 수 없다.
// 하지만 커스텀 app컴포넌트가 있는 이곳에서는 모든 global styles를 import 할 수 있다.

export default function App({ Component, pageProps }) {
  // 이것이 정해진대로 해야하는 프레임워크이다.

  return (
    <>
      <Layout>
        {/* layout의 children은 Component를 의미한다
          대부분의 사람들이 이러한 patterns를 사용하는데 너무 큰 app.js 파일을 원치 않기 때문이다.
         */}
        <Component {...pageProps} />
        <footer></footer>
        <style jsx global>
          {`
        a {
          color: skyblue;
      `}
        </style>
      </Layout>
    </>
  );
}

2. page.tsx

Home화면(랜딩 페이지를) 관리한다.

eg.

// pre-rerendering (cmd + option + u 로 확인해보자)
import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home | Next Movies</title>
      </Head>
      <h1 className="active">Hello</h1>

      {/* 전역 스타일 추가 global속성을 붙인다. */}
      <style jsx global>
        {`
        a {
          color: skyblue;
          // global style을 적용했는데 /about 페이지에서 Home은 하늘색이 아니다
          // about 페이지에서 Home이 하늘색이 아닌 이유는 About 페이지로 넘어갈 때, 다른 페이지에 있기 때문이다.
          // index.js에 있는 global은 / 페이지에 있을 때 적용한다.
          // 렌더링되고 있는 컴포넌트 또한 다른 컴포넌트 이다.
      `}
      </style>
    </div>
  );
}

pages 폴더 내에 원하는 이름으로 파일을 생성하면 파일 이름대로 라우팅할 수 있다. React에서는 react-router-dom을 통해 설정해주어야 했는데 Next.js에서는 폴더와 파일 생성만으로 라우팅 할 수 있다.