24.07.29 NextJs 페이지 라우팅

기존에 리액트에서는 리액트 라우터를 사용하여 페이지이동을 구현했었다.

router.js에서 각 페이지 컴포넌트들을 불러들이고

<Routes url='/' src={<Home />}></Routes>

이런 식으로 엔드포인트와 어떤 컴포넌트를 사용할지 정해주었던 것 같다.

 

하지만 NextJs에서는 폴더와 파일하나를 생성하면 자동으로 라우팅을 해준다.

app폴더에 about-us라는 폴더를 만들어주고, page.tsx파일을 만들어준다.

임시 리턴데이터를 넣어주고 저장하면 자동으로 연결이 된다.

엔드포인트를 폴더명으로하고, 안에 UI로 작동할 page.tsx를 만들면 자동으로 연결이 되는 것이다.

 

 

about-us/company/sales/page.tsx를 생성했을때는

/about-us/company/sales의 엔드포인트를 갖는 페이지가 생성되는 것이다.

이때 company에는 page.tsx가 없으므로 화면이 출력되지 않는다.

/about-us/company

/about-us/company/sales

 

 

app폴더 내부에 다른 파일을 생성해도 된다. 다만, page라는 이름만 사용하지 않으면 괜찮다.

about-us폴더 안에 components라는 폴더를 만들고 그 안에 avatar.tsx를 만들었다.

Avatar컴포넌트를 about-us의 page.tsx에 import해서 사용은 가능하다.

컴포넌트로의 활용

페이지로 활용시도

컴포넌트로의 활용은 가능하지만, 페이지로의 활용은 불가하다.

 

---

not-found.tsx도 NextJs에서 사용하는 파일명이다.

app폴더내에 not-found.tsx를 만들고 우리가 만들지 않은 폴더구조의 주소를 입력하면 해당 컴포넌트를 출력한다.

 

---

이전에 리액트라우터를 사용할 때에도 Link태그를 사용했지, 바닐라 자바스크립트의 a태그를 사용하지 않았다.

그 이유는 리액트의 장점인 SPA를 잃기 때문이다.

Next에서도 Link태그를 지원한다.

/components/navigation.tsx

임시로 Nav바로 사용할 컴포넌트를 Link태그를 사용하여 만들어주고, href로 엔드포인트를 지정해준다.

/와 /about-us 페이지에 적용시키기 위해 해당 page.tsx파일에 import해서 사용해본다.

---

이전에 리액트에서 pathname을 가져오려면 useLocation같은 훅을 사용했던 것으로 기억한다.

Next에서는 usePathname 훅을 사용한다.

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Navigation() {
    const path = usePathname();
    console.log(path);
    return (
        <nav>
            <ul>
                <li>
                    <Link href="/">Home</Link>
                </li>
                <li>
                    <Link href="/about-us">About-us</Link>
                </li>
            </ul>
        </nav>
    );
}

usePathname은 client component에서만 사용이 가능하고, 부모 컴포넌트중 use client로 마크된 것이없어, 디폴트 값으로 서버 컴포넌트로 인식한다는 오류이다.

use client를 맨 위에 작성하면 해결된다.

console.log에도 pathname이 올바르게 찍히는 모습이다.

 

그럼 이제 pathname변수로 어떤 페이지에 사용자가 위치해있는지 navbar에 표시해보자.

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Navigation() {
    const path = usePathname();
    console.log(path);
    return (
        <nav>
            <ul>
                <li>
                    <Link href="/">Home</Link> {path === "/" ? "🔥" : ""}
                </li>
                <li>
                    <Link href="/about-us">About-us</Link> {path === "/about-us" ? "🔥" : ""}
                </li>
            </ul>
        </nav>
    );
}

pathname에 알맞게 표시가 되는 모습이다.