프로젝트를 NextJS로 진행하게 되어서 NextJS공부를 했다.
이미 배웠던 폴더 구조와, route 방법 등등을 다시 되새기는 공부였다.
폴더 구조
├── asset
├── image
└── video
// 어플리케이션의 기능에 사용되는 소스들
component // 컴포넌트들 모음
├── common // 공통적으로 사용되는 컴포넌트들(ex button, modal)
└── layout // 각 페이지들의 전체 레이아웃이자 레이아웃 내부 컴포넌트들의 모임
├── layout.tsx
├── header.tsx
├── nav.tsx
└── footer.tsx
pages // 페이지를 담당하는 컴포넌트(폴더구조로 url 결정)
│ // (❗ Nextjs에서는 Routing 시스템이 파일/폴더 구조로 되어있다.)
├── index.tsx
├── _app.tsx // 각 페이지별로 공통적으로 쓰는 부분에 대한 리펙토링을 해주는 곳
│ // (index.js파일과 같은 역할, 모든 페이지에서 쓰는 스타일, 레이아웃 을 넣어 주기)
├── _document.tsx // meta태그를 정의 및 전체 페이지의 구조를 만들어준다
│ // (index.html파일과 같은 역할, html body와 같은 기본 태그들의 속성지정하여 어플리케이션의 구조를 만들어 주는 파일)
├── api // axios를 이용하여 서버와의 통신 로직을 담당
└── product
└── [id].tsx
styles // 스타일 관련 파일 모음
├── globals.css
└── Home.modules.css
core // redux 사용의 경우, core에서 관리하기
├── config // 어플리케이션에서 사용되는 설정들 모음
├── provider
│ ├── helper // store를 이용하는 공통 로직들 정리
│ └── provider // store의 값들을 컨테이너에게 전달해 줌
└── redux // Ducks 패턴으로 redux를 정의
route 방법
어떤 파라미터가 오든 해당 js파일을 보여준다는 의미다.
// [id].js
import { useRouter } from "next/router";
const Post = () => {
const router = useRouter();
const { id } = router.query;
return <div>post : {id}</div>;
};
export default Post;
// index.js
<div>
<Link href={"/about"}>Link로 about!!</Link>
</div>