#2. navigation, not-found(404)

navigation 

app/components 폴더 생성 후 navigation.tsx 파일 생성 후 아래 코드 코딩

'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>
  )
}

 

Link 컴포넌트 

- import Link from "next/link";  

- 페이지 이동 링크를 제공

- href 속성으로 링크 작성

 

usePathname() 

- 현재 컴포넌트가 실행된 디렉토리 경로를 리턴함. 상단에 'use client'를 기재해야 이용이 가능

- 예제 코드에서 { path==='/' ? "현재경로일때" : " 아닐때 " } 부분을 이용하여 현재 주소를 표시

- 해당 파일은 page.tsx가 아니기 때문에 페이지 경로로 사용이 불가하고 그냥 component 로 동작됨

- 해당 컴포넌트를 네비게이션이 필요한 page.tsx에서 import하여 사용

- nextjs는 기본적으로 Server Side Render를 함.

'use client'

- 클라이언트 측에서 render된다는 의미가 아니라 클라이언트(frontend) 에서 hydrate 및 ineractive 된다는 의미

- 쉽게 생각하면 클라이언트 측에서 interactive하게 동작을 해야하는 코드가 추가가 되면 프레임워크에서 

   'use client'를 요구하게 된다. (자동으로 오류표시해줌) 

- 해당 구문은 최상단에 작성 (import 구문 위)

 

 

 

 

/ 및 /about-us 의 page.tsx에  Navition 등록

import Navigation from "../components/navigation";

export default function Page(){
  return (
    <div>
      <Navigation/>
      <h1>Hello NextJs!!</h1> 
    </div> 
  )
}

 

 

 

404에러 페이지

/app/not-found.tsx 파일 생성

import Navigation from "../components/navigation";

export default function NotFound() {
  return (
    <div>
      <Navigation/>
      <h1>404 Not Found!!</h1>
    </div>    
  )
}

 

- 404에러에 대응하는 페이지 생성 완료

- 404페이지에도 components 를 import하여 여러 작업을 할 수 있음