[모두의 이력서_9일차] Next.js 이미지 넣기, Next.js에서 현재 url을 알고 싶을 때

Next.js 이미지 넣기

---

1. 이미지 public에 넣기

next에서는 이미지를 넣을 때 public에 이미지를 넣어줘야 됩니다.

 

2. 이미지 적용시키기

이미지를 적용시키기 위해서는 Image를 import 해와야 됩니다.

그리고 적용할 이미지도 public에서 불러와야 됩니다.

import Image from "next/image";
import logo from "../../../public/logo.svg";

 

import Image from "next/image";
import logo from "../../../public/logo.svg";

const Header = () => {
  return (
    <h1>
      <Link href="/">
        <Image src={logo} alt="모두의 이력서 로고" />
      </Link>
    </h1>
  );
};

이런 식으로 적용시키면 됩니다.

 

*다음에 추가로 배경이미지 적용방법에 대해서도 적겠습니다.*

 

Next.js에서 현재 url을 알고 싶을 때

---

일반 react만 사용하려면 react-router-dom에 있는 useLocation을 사용하겠지만

next는 이미 지원이 되어 있어 import 해서 사용해주기만 하면 됩니다.

import Link from "next/link";
import { useRouter } from "next/router";

import * as styled from "../../../styles/components/layout/header/Nav";

const Nav = () => {
  const router = useRouter();
  console.log(router);

  return (
    <styled.NavCon>
      <ul>
        <styled.Navli pathname={router.pathname === "/"}>
          <Link href="/">발견</Link>
        </styled.Navli>
        <styled.Navli pathname={router.pathname === "/Resume"}>
          <Link href="/Resume">이력서</Link>
        </styled.Navli>
      </ul>
    </styled.NavCon>
  );
};

export default Nav;

여기서 console은 아래와 같은 출력이 됩니다.

 

저는 router.pathname을 사용해서 현재 url를 가져왔습니다.

 

 

참고자료

---

https://choisuhyeok.tistory.com/82

[Next.js] Next.js에서 현재 url을 알고 싶을 때