next 환경변수

next에서 환경변수 만들기

1. .env.local 파일 만들기
   local이 들어가면 git에 안올라감

/* eslint-disable react-hooks/rules-of-hooks */
'use client';
import axios from 'axios';
import EChartsComponent from '../components/EChartsComponent';
import { useEffect, useState } from 'react';
import { env } from 'process';

interface IData {
  '개인위치정보 침해': number;
  구분: string;
  '기타 불법 컨텐츠': number;
  '기타 정보통신망 이용형 범죄': number;
  '기타 정보통신망 침해형 범죄': number;
  '사이버 도박(경마·경륜·경정)': number;
  '사이버 도박(기타)': number;
}

export default function echart() {
  const [year, setYear] = useState([]);
  const [cyberData, setCyberData] = useState([]);
  const [data, setData] = useState();

  async function getUser() {
    try {
      const response = await axios.get(
        'http:// 
        {
          headers: {
            Authorization: process.env.NEXT_PUBLIC_AUTHORIZATION,
          },
          params: {
            serviceKey: process.env.NEXT_PUBLIC_SERVICE_KEY,
            integer: 1,
            perPage: 10,
          },
        }
      );

      setData(response.data.data);
      setYear(response.data.data);
      setCyberData(response.data.data);
    } catch (error) {
      console.error(error);
    }
  }

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

  return (
    <div className='mt-30'>
      <h1 className='title'>서울시 사이버 범죄율</h1>
      {data ? (
        <div className='echart'>
          <EChartsComponent year={year} cyberData={cyberData} />
        </div>
      ) : (
        <p className='loading-msg'>Loading...</p>
      )}
    </div>
  );
}

.env.local

NEXT_PUBLIC_AUTHORIZATION= 여기다가 키값
NEXT_PUBLIC_SERVICE_KEY= 여기다가 키값

NEXT_PUBLIC을 앞에 붙여줘야함