🧨 문제

아래와 같이 ‘use client’키워드를 사용하는 클라이언트 컴포넌트에서 getGnbMenu 함수로 데이터 페칭을 했는데 404상태코드를 응답받았다.

'use client';
...

export default function Menu() {
    const [gnbMenu, setGnbMenu] = useState([]);

    const fetchGnbMenu = async () => {
        const {globalGnbMenuData} = await getGnbMenu();
        setGnbMenu(globalGnbMenuData);
    };

    useEffect(() => {
        fetchGnbMenu();
    }, []);

    return (
       ...
    );
}

🤔 원인 및 🙌 해결

요청 url을 아래와 같이 수정해주었다. NEXT_PUBLIC접두어는 Next.js에서 클라이언트 측에서 액세스할 수 있는 공용 환경 변수를 정의하는데 사용된다.

Next.js는 .env.local 파일을 통해 환경 변수에 대한 내장 지원을 제공한다. 기본적으로 Next.js를 사용하면 .env.local 파일에서 NEXT_PUBLIC_으로 시작하는 환경 변수를 정의할 수 있으며 이러한 변수는 클라이언트 측 코드에서 사용할 수 있다.

NEXT_PUBLIC 접두어를 사용하는 이유는 환경 변수의 서버 측과 클라이언트 측 사용을 구별하기 위해서이다. 'NEXT_PUBLIC' 접두사가 없는 환경 변수는 서버 측에서만 액세스할 수 있으며 보안상의 이유로 클라이언트 측 코드에 노출되지 않는다.

환경 변수에 'NEXT_PUBLIC' 접두사를 붙여 클라이언트 측에서 안전하게 사용할 수 있음을 명시적으로 나타낸다. 이를 통해 브라우저 또는 React 구성 요소와 같은 클라이언트 측 JavaScript 코드에서 직접 환경 변수 값에 액세스할 수 있다.

NEXT_PUBLIC 접두사를 사용하면 민감한 정보와 비밀이 클라이언트 측 코드에 노출되지 않도록 하여 애플리케이션에 추가 보안 계층을 제공할 수 있다.

// before
const menu = {
    getGnbMenu: async () => {
        const res = await fetch(
            process.env.AA_API,
            {
                next: {
                    revalidate: 60, //1분마다 한번씩 갱신한다.
                },
            },
        );
				...
    },
};
export const {getGnbMenu} = menu;

// after
const menu = {
    getGnbMenu: async () => {
        const res = await fetch(
            process.env.NEXT_PUBLIC_AA_API,
            {
                next: {
                    revalidate: 60, //1분마다 한번씩 갱신한다.
                },
            },
        );
				...
    },
};
export const {getGnbMenu} = menu;