[학습] 프로젝트를 위한 Next.js 학습 정리

이번 글은 단순하게 내가 무엇을 학습했는지를 기록하기 위한 글이다.

 

https://youtu.be/9KOaR6QMb9A

생활코딩 유튜브의 ' Next.js 13' 강의의 재생목록을 통해 학습하였음을 알린다.

---

0. Next.js 란 무엇인가

• Next.js는 React와 Express.js와 비슷한 형식의 시스템이 탑재되어 있다. 그러므로 프론트엔드 단과 백엔드 단을 동시에 구현할 수 있는 풀스택 프레임워크로써 사용할 수 있다.
• Next.js는 기본적으로 Server Side Rendering을 지원한다.
• Next.js 13부터는 App router 라는 새로운 개념이 도입되고, 그 과정에서 Server component라는 React의 새로운 기능도 살펴 볼 수 있다.

1. 설치와 실행

• npx create-next-app@latest . 을 통하여 설치를 진행한다.
• npm run dev 를 통하여 프로젝트를 실행한다.

2. 샘플앱 세탁

• 해당 화면과 같은 초기 설정을 수정하기 위함.
• src/app/layout.js 에서 골격을 수정할 수 있음.
• src/app/page.js 에서 화면 구성 요소를 수정할 수 있음.
• src/app/global.css 에서 기본 css 디자인 요소를 수정할 수 있음.

3. 배포

• npm run build를 통해 빌드
• npm run start를 통해 빌드 파일로 서버 배포

4. 뼈대 만들기

• src/app/page.js Home 컴포넌트에서 본문 내용을 수정한다.
• src/app/layout.js RootLayout 컴포넌트에서 전반적인(모든 경로) 레이아웃에 해당되는 내용을 수정한다.

5. 라우팅

출처 : 생활코딩 https://youtu.be/xE-GT8gjgJw?si=9uvDBbbClgWJuk32

segment : path를 이루는 각각의 요소

라우팅 : 경로에 따라서 어떤 컨텐츠를 어떤 박식으로 보여줄 것인가에 대한 것

• path 없는 기본 경로는 홈페이지 내용을 보여주게 된다.
• 홈페이지는 app/page.js의 내용을 표시함.

추가 경로를 작성하는 방법

• app 디렉토리 밑의 커스텀 디렉토리를 통해 새로운 경로(디렉토리가 path 이름)을 만들 수 있다.
• 새로운 경로의 디렉토리에서는 해당 파일들을 작성할 수 있다. (파일명 약속됨)

page.js	본문의 내용을 표시
layout.js	page.js 내용을 둘러싸는 하위 레이아웃 (상위 레이아웃은 app/layout.js)

page.js는 하나의 메인 컴포넌트를 반환한다. (export default)

layout.js의 내용은 다음과 같다.

export default function Layout(props) {
	return (
    	<form>
        {/* 레이아웃 내용 작성 */}
        {props.children}
        </form>
    );
}

Dynamic Routing 이란?

read/1, read/1000와 같이 경로에특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것.

• 경로가 될 디렉토리의 하위 디렉토리로 대괄호 [변수명] 형식의 디렉토리를 작성하여 구현한다.
• [변수명]의 변수 값을 활용하기 위해서는 page.js의 컴포넌트에 props를 매개변수로 할당하고, props.params를 사용한다. (예시 props.params.id)

export default function Read(props) {
  return (
    <>
      <h2>Read !!</h2>
      {props.params.id}
    </>
  );
}