[Next.js] create-next-app으로 프로젝트 만들고 기본 라우팅까지 잡아보기

			//프로젝트명
npx create-next-app next10-jsmeetup

npx cra 하는것처럼 만들어주고

 

 

필요없는 스타일, pages 내용 제거 후에

 

cd 명령어를 사용해서 내 프로젝트의 루트 디렉터리로 이동해준다.

 cd next10-jsmeetup

 

 

 npm run dev

 

package.json에 scripts를 보고 개발버전이니까 npm run dev로 파일을 실행시켜준다.

 

 

 

 

 

next.js는 따로 라우터 설정없이 폴더를 기준으로 라우팅을 잡는다.

 

_app.js는 각 페이지가 초기화될 때 로딩되는 파일이다. 때문에 공통 레이아웃, 글로벌 CSS를 적용할 수 있다.

index.js는 / 경로가 된다.

news.js는 /news 경로가 된다.

 

404페이지는 나중에 ssg로 처리할 것

 

/ 밑에 하위폴더 설정하는 다른방법

 

 

news라는 폴더를 만들고 index.js를 하면 똑같이 /news를 사용할 수 있다.

news 폴더에 있는 detail의 라우터는

 

/news/detail 이 된다

 

 

동적 라우팅 설정 방법

만약 게시판의 상세페이지 보기를 하려면?

 

[] 대괄호를 입히면 동적 라우팅으로 인식하게된다.

 

//함수형 컴포넌트에서 url 가져오기
import { useRouter } from 'next/router';

const DetailPage = () => {
  const router = useRouter();
  return <h1>DetailPage {router.query?.id} </h1>;
};

export default DetailPage;

url의 값을 가져오려면 next에서 지원하는 useRouter를 사용해주면 된다.