[모두의 이력서_12일차] Next url표시 방법, Next 특정 페이지에서 header안보이게 하기

오늘 로그인 기능을 완성하려 했으나 항상 next에서 뭔가가 걸려서 결국 css까지 밖에 마무리를 못했습니다.

개인프로젝트 진행하면서 Next에서 막혔던 부분들을 공유해보려고 합니다.

(css는 딱히 설명할 게 없어서 안 쓰겠습니다.)

 

Next url표시 방법

---

프로젝트를 작업하다 보면 url을 아래와 같이 쓰고 싶은 경우가 생깁니다.

 

 

pages
|- Login.tsx

import Link from "next/link";

const Test = ()=>{
    return(
        <Link href="/Login">
            로그인
        </Link>
    )
}

하지만 Next에서는 pages에서 작성한 파일이름을 적어야 클릭을 했을 때 Login.tsx로 찾아가게 됩니다.

이때 as를 사용하시면 됩니다.

 

as
이동할 경로 혹은 URL

<Link href="/" as="브라우저의 주소창에 표시될 URL">
    ...
</Link>

 

그래서 저는 아래와 같이 작성해 주었습니다.

import Link from "next/link";

const Test = ()=>{
    return(
        <Link href="/Login" as="/auth/login">
            로그인
        </Link>
    )
}

 

 

 

Next 특정 페이지에서 header 안 보이게 하기

---

웹사이트를 둘러보다 보면 로그인페이지, 회원가입페이지 등 회원 관련 페이지일 경우

헤더를 안 보이게 하는 사이트를 종종 볼 수 있습니다.

 

react-router에서는 아래와 같이 state를 사용하면 가능하지만

<Link to={`/detail`} state={{ test: "hello" }} >
   test
</Link>

Next이기 때문에 사용할 수 없고 대신 query를 사용하시면 됩니다.

 

 

pathname: 해당하는 라우터
query: 전달할 props를 넣어주고 그 값을 object로 적어주시면 됩니다.

<Link
  href={{ pathname: "/Login", query: { header: "N" } }}
  as="/auth/login"
>
  로그인
</Link>

이제 저장한 값을 가지고 _app.tsx에서 현재 URL의 router.query.header === 'N'이면

헤더가 안 나오게 설정해 주시면 됩니다.

import { useRouter } from "next/router";

import Header from "../components/layout/header/Header";

const _app = ({ Component }: AppProps) => {
  const router = useRouter();
  console.log(router);
  console.log(router.query.header); // null or 'N'

  return (
    <>
      <main className={notoSansKr.className}>
            {router.query.header !== "N" && <Header />}
      </main>
    </>
  );
};

export default _app;

 

참고자료

---

https://im-designloper.tistory.com/103

[Next.js] next/Link 사용하기 (공식문서 내용 정리)

https://chaeyoung2.tistory.com/52

next.js Link 와 useRouter를 사용해 props 전달하기