[Next.js][기초] 2. NextJS 설치 (수동)NextJS 페이지 루트(Defining Routes) 정의하기 | 새로운 페이지 만들어보기 | Not Found 페이지 만들기 | 네비게이션 바 만들기

이번 포스팅에서는 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>
    );
}