민프

Dynamic(동적) routes는 아래와 같은 형식으로 되어있습니다.Movie로 예를 들자면, 아래와 같이 사용자가 입력한 숫자가 들어가거나 해당하는 상세페이지의 id를 넣을 수 있습니다/movies/:id -> React Router일 떄 이렇게 사용한 부분이죠/movies/121212 NextJS에서는 app Router를 사용하기에 아래와 같이 파일시스템으로 대괄호[]를 넣어서 처리하게 됩니다이렇게 위 와 같은 링크로 했을때 정상 동작하는 것을 확인하실 수 있습니다. 그럼 여기에서 URL에 있는 id 파라미터 값을 가져오는 것을 어떻게 할 수 있을까요?아래 사진과 같이 Props를 log로 찍어서 백엔드에서 나오는 로그를 확인해본 결과 props로 id값을 잘 가져오는 것을 확인할 수 있었습니다p..

Routes 그룹화Next에서는 URL을 디렉토리 구조로 나타낸다고 하는데 그러면 페이지를 그룹시킬때는 어떻게 해야할까요?예를 들어서 영화 페이지, 영화 세부 정보 페이지, 영화 배우, 영화 검색 페이지 등등.. 공통 주제의 페이지들은 어떻게 그룹화를 시켜야할까요?  아래 사진과 같이 ('그룹 이름') 이렇게 해놓으면 Routes를 그룹화 해서 Logical Groups으로 만들 수 있습니다여기에서 Layout.tsx, not-found는 기본적으로 모든 Routes에 공유되기에 app 디렉토리에 속해있어야 합니다! MetadataNext.js에서 metadata는 웹 페이지의 메타데이터를 정의하는 객체입니다. 메타데이터는 웹 페이지에 대한 정보를 포함하며, 주로 검색 엔진 최적화(SEO), 소셜 미디어..

LayoutNext.js에서 Layout은 여러 페이지에서 공통으로 사용하는 UI 컴포넌트를 의미합니다. 예를 들어, 여러 페이지에서 동일하게 유지되는 네비게이션 바, 푸터, 사이드바 등이 Layout으로 구현될 수 있습니다. 이를 통해 코드의 중복을 피하고, 일관된 사용자 경험을 제공할 수 있습니다.위 사진 처럼 layout을 정의한다면/about-us의 하위 URL 페이지들은 /about-us의 layout에서 정의된 UI는 공통적으로 나타내질 것 입니다Root Layout애플리케이션의 모든 페이지에 공통으로 적용되는 레이아웃입니다. 예를 들어, 글로벌 네비게이션 바, 사이트의 메인 푸터 등 전역적으로 사용되는 UI 요소들을 포함합니다. Root Layout은 Next.js 애플리케이션의 구조를 설정..

'use client'는 Client에서만 render한다는 의미가 아니다'user client' 명령어가 있든 없든 모든 Component(Client Component, Server Component)는 Backend에서 먼저 pre-render가 되는데 그건 전부 interactive하지 않는 HTML로 변환되게 된다.여기에서 'use client'를 사용하게 되면 어떤 Component가 hydreate 되는지, 즉 어떤 것이 Interactive를 필요로 하는지, 더 쉽게 말해 어떤 것이 JavaScript가 필요한지, 어떤 것이 불필요한지 등을 결정하는데에 사용하게 된다. 정리해보자면 1. 모든 것이 첫번째로 Server Side에서 Pre-Render가 되어서 HTML로 변환된다.2. HTM..

이번 포스팅에서는 NextJS에서 새로운 페이지 만들고 만든 페이지들을 에 대한 루트를 정의해보는 걸 다뤄보겠습니다 React를 사용해보신분들은 react-router와 같은 개념이라고 생각하시면 될 것 같습니다react-router의 작동방식은 아래와 같이 url를 지정하고 각 컴포넌트에 대한 render를 요청하는 방식입니다   / (루트) ->    /information ->    /client/:id ->  근데 NextJS에서는 이렇게 URL을 정의할 필요가 없고, 파일 시스템을 통해서 URL을 표현합니다그럼 이제 페이지를 만들어 보겠습니다 1. app폴더(Root Segment) 하위 폴더 및 page.tsx 만들기app폴더(Root Segment) 하위 폴더로 만들고 싶은 page.tsx를..

이번 포스팅에서는 next.js를 수동으로 설치해보는 내용에 대해서 다뤄보겠습니다. 1. 디렉토리를 하나 만듭니다. 2. Vscode를 실행시키고 'npm init -y'를 실행위 명령어를 실행시키면 아래와 같은 정보들을 가진 package.json이 생성될겁니다 3. 'npm install react@latest next@latest react-dom@latest'를 입력하여 최신버전을 설치해줍니다.여기에서 react는 UI와 다른 모든 것들을 구성하는 부분이고,react-dom은 react에서 UI를 구성한 것들을 브라우저의 DOM(Document Object Model)에 렌더하는 역할을 합니다  4. package.json에서 scripts의 내용을 아래와 같이 수정해줍니다 (스크립트 내용은 자유..