(2)이정환_Next.js_2_Next.js 초기셋팅

● Next.js의 페이지 라우팅 //React.js의 페이지 라우팅과 살짝 달라서, 복습하자

- 방법1_ [Pages] 폴더 내의 파일명 기반 페이지 라우팅

- 방법2_ [Pages] 폴더 내의 폴더명 기반으로 그 안의 페이지 컴포넌트는 [index.js]로 페이지 라우팅

● 동적 경로의 페이지 라우팅 지정 :

=> [페이지] 폴더 내에 [id].js를 셍상히여, 페이지의 각 id마다 매핑되는 동적 경로 페이지 생성

● Next.js의 페이지 라우팅 기반의 Next.js App 생성하기

○ 순서1_ 해당 Next.js 프로젝트를 생성할 폴더를 지정한 뒤, VsCode에서 폴더 열기 => 터미널 창을 열어, 아래와 같은 명령어 작성

npx create-next-app@14 page_routing_next
//npx create-next-app@14 : 페이지 라우팅 지원 버전의 next.js이다.
//page_routing_next : 패키지 이름

○ 순서2_ 그러면, 아래의 선택지들이 나오는 데, 사진과 같이 선택지를 고르셈

○ 순서3_ 프로젝트가 생성되면, VsCode를 다시 그 프로젝트 폴더로 열고, 아래의 명령어를 터미널 창에 작성해서, 프로젝트를 실행해라.

npm run dev

● Next.js의 Page 컴포넌트 페이지 만들어보기 //React랑 좀 다름

[pages]폴더 내에 페이지 명의 tsx파일을 생성한 뒤, 아래의 코드로 패이지 컴포넌트 작성

export default function Page()
{
    return (<div className="Test">Test</div>)
}

- 차이점 : 파일 명을 컴포넌트 네임으로 , 컴포넌트 명은 Page로 통일함

● Next.js의 App 컴포넌트 코드 구조 파악 //이것도 시발 React랑 매우 다름

- _app.tsx //이름부터도 다름 시발

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

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
//매개인자들 역할
//Component : Page 역할을 할 컴포넌트를 받는 매개인자
//pageProps : Component에서 받은 Page 컴포넌트의 전달받는 props들이 들어있는 객체 매개인자

//이건 시발 사용하면서, 익숙해지면 될거 같다.


//return <Component {...pageProps} />; Component의 컴포넌트의 spread로 흩뿌려서 props들을 나눠줌 

// App은 모든 컴포넌트, 페이지의 최상위 컴포넌트이다. ..이건 React랑 역할이 같음

§ 참고 : global 헤더 만들기 => [_app.tsx] 코드 내 return 위에 <Header/>를 추가하면 된다.

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

export default function App({ Component, pageProps }: AppProps) {
  return (<>
      <Header />//추가한 Header 컴포넌트
      <Component {...pageProps} />
  </>);
}

● Next.js의 index.tsx 파악하기 => 여기는 썸네일 , favicon 등 만드는 곳

● [next.config.mjs]에서 next 설정인 reactStrictMode 모드 끄기

- next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,//false로 바꾸기
};

export default nextConfig;