별 거 아닌데 삽질했던 대장정...

어떤 글을 쓸 거냐면

백엔드 없이 테스트하고 싶을 때, 비동기 통신을 사용하지 않고 로컬에 저장한 json 파일 데이터를 가져와 mock data로 활용하는 방법에 대해 정리하는 글

리액트에선 json mock data도 axios로 fetching했지만 next.js에선 이 방법이 안 통했다.

next.js에서 로컬 json 파일 가져오는 방법

• json에서 데이터를 가져와 리스트를 구현할 것임.

1. 필요한 데이터를 .json 파일로 저장한다.

• /public 폴더 경로에 저장해야 한다.
• public 내부에서 폴더나 파일명은 원하는 이름으로 지정한다.

// 파일 경로: /public/data/data.json

[
	{
	 "id": 1,
	 "title": "abc",
	 "image": "http://example.com/1234.jpg",
     },
     {
	 "id": 2,
	 "title": "def",
	 "image": "http://example.com/5678.jpg",
     },
     {
	 "id": 3,
	 "title": "ghi",
	 "image": "http://example.com/9012.jpg",
     },
.....
]

2. require 함수를 사용하여 원하는 곳에 가져온다.

• require()

  node.js에서 제공하는 함수.
  Next.js에서 /public 디렉토리에 있는 정적 파일은 자동으로 서버와 클라이언트 모두에게 노출된다.
  따라서 public에 있는 파일은 require 함수를 사용하여 가져올 수 있다.

• 알다시피 next 13 버전에서는 getStaticProps같은 함수들을 지원하지 않는다.
  Data Fetching이 궁금하다면 공식문서를 참고하자.

• 비동기 통신을 하는 것이 아니므로 getData 함수나 json파일을 변환해줄 필요없이 가져오기만 하면 된다.

import React from 'react'

export default function page() {
  // JSON 파일 가져오기
  const datas = require('/public/data/data.json')

  return (
    <div>
      <h1>{datas.title}</h1>
      <section>
       {datas?.map((data) => (
          <div key={data.id}>
            <Link href={`/data/${data.id}`}>
              <Image
                src={data.image}
                alt={data.title}
                width={200}
                height={200}
              />
              <p>{data.title}</p>
            </Link>
          </div>
        ))}
    </div>
  )
}

• map을 사용하여 각각의 아이템을 리스트로 나열했다.
• Image 컴포넌트를 사용하여 이미지를 띄우고자 한다.
• 아이템을 클릭하면 상세 페이지로 이동하도록 만들었다.

이런 식으로 가져오면 된다.
데이터를 구현하는 것이 목적이라면 여기까지 보고 나가시면 된다.

하지만 여기서 만난 에러

1. 나의 로컬 json파일에 있는 이미지는 외부 주소에 있다.
2. next.config.js에 이미지 경로가 설정되어있지 않다는 에러 메시지가 나왔다.

3. 이미지 외부에서 불러오는 법

공식문서 참고

• next.config.js에서 images.domains을 추가했다.
• url은 에러 메시지로 뜬 주소를 넣었다.

// next.config.js

const nextConfig = {
  images: {
    domains: ['assets.example.com'],
  },
};

이렇게 구현하면 이미지까지 띄우게 된다 !!!!
오래 걸려서 자괴감이 컸는데 이미지 파일이 보일 때 너무 기뻐서 울 뻔했다. 💦