민프
[Next.js][기초] 2. NextJS 설치 (수동)NextJS 페이지 루트(Defining Routes) 정의하기 | 새로운 페이지 만들어보기 | Not Found 페이지 만들기 | 네비게이션 바 만들기 본문
[Next.js][기초] 2. NextJS 설치 (수동)NextJS 페이지 루트(Defining Routes) 정의하기 | 새로운 페이지 만들어보기 | Not Found 페이지 만들기 | 네비게이션 바 만들기
민프야 2024. 6. 4. 18:50이번 포스팅에서는 NextJS에서 새로운 페이지 만들고 만든 페이지들을 에 대한 루트를 정의해보는 걸 다뤄보겠습니다
React를 사용해보신분들은 react-router와 같은 개념이라고 생각하시면 될 것 같습니다
react-router의 작동방식은 아래와 같이 url를 지정하고 각 컴포넌트에 대한 render를 요청하는 방식입니다
/ (루트) -> <Home />
/information -> <Information />
/client/:id -> <Client />
근데 NextJS에서는 이렇게 URL을 정의할 필요가 없고, 파일 시스템을 통해서 URL을 표현합니다
그럼 이제 페이지를 만들어 보겠습니다
1. app폴더(Root Segment) 하위 폴더 및 page.tsx 만들기
app폴더(Root Segment) 하위 폴더로 만들고 싶은 page.tsx를 아래와 같이 만들어 주고 잘 실행되는지 확인해봅시다
이런식으로 파일 시스템으로 루트를 만들어주면 됍니다.
만약 /information/company을 만들어보고싶으면 아래와 같이 하면 됍니다
하다보면 이런 생각이 드실 수 있으실 겁니다
그럼 파일구조에 아래 사진과 같이 Componets, Model, Controller 와 같은 디렉토리를 생성하고 tsx파일을 만들면 그것도 URL 루트가 되는건가?
정답은 아닙니다
사용자가 url로부터 보게 될 요소는 디렉토리내에 page.tsx가 있는 부분만 URL 루트가 될 수 있습니다
2. Not Found 페이지 만들기
사용자가 정의하지 않는 URL로 접근했을 때 나오는 Not Found페이지를 만들어 보겠습니다
간단히 아래 사진과 같이 Root Segment에 not-found.tsx라는 파일만 만들어주시면 이상한 URL로 접근했을 때 Not Found페이지가 잘 나오는 것을 확인하실 수 있습니다
3. 네비게이션 바 만들기 with Link
React할 때 a태그를 이용해서 브라우저의 네비게이션을 사용했는데 이렇게 하지 않고 nextJS프레임워크에 있는 네비게이션을 사용해서 페이지를 이동시켜보겠습니다
저는 Compoents라는 폴더를 만들고 그 폴더 안에 navigation바를 만들었습니다
next에서는 현재 path의 정보를 알 수 있는 usePathname이라는 Hook이 있는데요
이것을 사용해서 저는 현재 어느 메뉴에 있는지 알 수 있도록 하였습니다
아래와 같이 네비게이션 바가 잘 동작하는 것을 확인하실 수 있습니다
여기에서 SSR의 특징을 확실하게 볼 수 있는데요
웹사이트 설정에서 JavaScript를 비활성화하고 렌더링을 해보면 위 코드에서 console.log()가 웹사이트 콘솔에는 보이지 않지만 Server쪽 Console에는 나오는 것을 확인할 수 있었습니다
이게 바로 Sever쪽에서 Render가 된 것을 의미하는 것 이죠
Rendering에 대해 모르는 분들이 있을 것 같아서 말씀드려보자면
브라우저는 아래 코드를 이해하지 못합니다 그래서 아래 코드의 JavaScript Function을 가져와서 브라우저가 이해할 수 있는 HTML로 변환하는 작업을 Rendering라고 말합니다
따라서 NextJS에서는 모든 컴포넌트와 페이지들에 대해 server측에서 먼저 rendering을 진행하게 되고, 그 결과물인 HTML을 브라우저에게 주는 것 입니다
"use client"
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function Navigation() {
const path = usePathname();
console.log('path ' + path);
return (
<nav>
<ul>
<li><Link href="/">Home</Link>{path === "/" ? "여기" : ""}</li>
<li><Link href="/information">Information</Link>{path === "/information" ? "여기" : ""}</li>
</ul>
</nav>
);
}
'[Next.js]' 카테고리의 다른 글
[Next.js] 기초 6. Dynamic Routes (0) | 2024.08.13 |
---|---|
[Next.js] 기초 5. Routes 그룹화 및 Metadata (0) | 2024.08.12 |
[Next.js] 기초 4. Layout System (레이아웃 시스템) (0) | 2024.08.12 |
[Next.js] 기초 3. 'use client'는 Client에서 Interactive하게 만들어주는 것 (0) | 2024.08.12 |
[Next.js][기초] 1. NextJS 설치 (수동) (0) | 2024.06.04 |