본문 바로가기

Programing/Next.js28

App Routes 만드는 기본 방법 파일 기반 라우팅넥스트는 파일 시스템 기반 라우터 방식을 채택한다. 이 말은 폴더를 만들면 그 폴더 이름으로 URL 세그먼트가 만들어지고, 폴더 안에 폴더 안에 폴더를 만들면 /폴더/폴더/폴더/page.tsx 처럼 중첩 라우팅도 가능하다는 이야기다.리액트에서 라우트 파일을 별도로 만들어서 일일이 설정해줬던 것에 비하면 굉장히 직관적이고 간편하다.마지막 경로(leaf)에 있는 폴더 안에 page.tsx를 만들면 그 경로의 최종적인 페이지를 렌더링 할 수 있음.물론 nated route(중첩 경로)이더라도 중간에서도 페이지를 만들 수도 있음. 예를 들어 app/detail/[id] 라는 라우트가 있을 때 detail 폴더에도 page.tsx 하나, [id] 폴더에도 page.tsx 하나 만들면 디테일 페이지.. Programing/Next.js 2024. 7. 5.
App Router란 무엇인가? App Router란?Next.js가 페이지 라우팅을 하는 방법.Next.js 13버전 부터 기존의 Pages Router 방식에서 완전히 새로운 App Router 방식이 도입됨.프로젝트 내부 app 폴더 내에서 새 디렉토리를 만들면 그것이 url 세그먼트가 됨.App Router에서는 공통 레이아웃, 중첩 라우팅, 에러 처리 방법 등을 제공함.만약 pages router와 app router를 한 프로젝트에서 혼용하는 경우 앱 라우터가 우선됨. 따라서 충돌이 발생할 수 있음.개발자가 page.tsx 파일에서 "use client"를 최상단에서 명시하지 않으면 기본적으로 리액트 서버 컴포넌트로 동작함.리액트만 배우고 온 경우에는 서버 컴포넌트 방식이 생소할 수 있어서 러닝 커브가 있을 수 있음.폴더와 .. Programing/Next.js 2024. 7. 5.
Next.js의 라우팅에서 사용되는 필수 용어 정리 Next.js에서 사용되는 라우팅 필수 용어Tree계층 구조를 시각화하기 위한 규칙.부모-자식 컴포넌트가 있는 컴포넌트 트리나 폴더 트리와 같이 사용된다.나무가 뿌리를 내리는 모습과 비슷하게 생겨서 Tree 구조라고 함.Subtreeapp 폴더를 제외하고 그 다음 디렉토리 부터... 트리의 일부분.root(첫 번째 시작점)에서 leaf(끝 지점), 즉 뿌리에서 잎까지 포함하는 개념임.이 Subtree 들이 모여서 하나의 Tree를 만듦.RootSubtree의 시작점.app 폴더 바로 다음 계층을 말함. 즉 첫번째 노드를 말함.그러나 개발자들이 특정 Subtree를 지목하지 않고 '루트 폴더'라고 말하면 프로젝트 폴더의 가장 바깥을 의미함.LeafURL path의 가장 마지막 노드임.더 이상 childre.. Programing/Next.js 2024. 7. 4.
Next.js 프로젝트의 파일 구조 app 폴더Next.js 프로젝트를 세팅하면 src/app 폴더가 생성된다.앱 라우팅을 담당한다.이곳의 폴더는 자동으로 라우팅 되며 URL path를 폴더명으로 갖게 된다.layout.tsx 파일과 page.tsx이곳에 layout.tsx 파일을 만들면 프로젝트의 모든 파일에 영향을 줄 수 있는 파일을 만들 수 있다.그리고 page.tsx는 src/app 폴더에 있는 파일은 자동으로 '/'라는 URL path를 갖게 된다. 즉 홈 페이지의 역할을 한다는 것이다.app 폴더는 '/' home이다.// app/layout.tsxexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( .. Programing/Next.js 2024. 7. 4.
Package.json 살펴보기 프로젝트를 세팅하고 나면 루트 폴더에 package.json 파일이 생성된다.React.js를 사용할 때는 이런 내용이 필요가 없었으나, CSR, SSR, SSG, ISR 등 렌더링 방식을 선택해서 사용할 수 있는 Next.js에서는 필요한 명령어들이 들어있다. { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }} 본인이 편한 방식대로 yarn dev 등으로 사용할 수 있다. dev : 개발 모드. 웹 브라우저를 띄워 실시간으로 코드의 변경사항이 반영되며 보여준다.build : 프로덕션 레벨에서 배포하기 전에 우리가 작성한 코드를 서버에서 작동시킬 수.. Programing/Next.js 2024. 7. 4.

티스토리툴바