next에서의 env 설정

넥스트에서는 기본적으로 .env.local를 사용하여 불러온 환경변수에 대해 브라우저에서는 노출되지 않고 서버에서만 노출되게 설정되어 있음. 

 

// .env.local

API_URL = http://localhost:3000

yarn dev

Loaded env from /Users/niege/practice/next-practice/next-todo/.env.local

// pages/index.tsx

import React from "react";
import { GetServerSideProps, NextPage } from "next";
import TodoList from "./components/TodoList";
import { TodoType } from "../types/todo";
import { getTodosAPI } from "../lib/api/todo";

interface IProps {
  todos: TodoType[];
}

const app: NextPage<IProps> = ({ todos }) => {
  console.log(process.env, "클라이언트");
  return <TodoList todos={todos} />;
};

export const getServerSideProps: GetServerSideProps = async () => {
  try {
    console.log(process.env, "서버");
    const { data } = await getTodosAPI();
    return { props: { todos: data } };
  } catch (e) {
    // console.log(e);
    return { props: { todos: [] } };
  }
};

export default app;

 

터미널:

...

NODE_ENV: 'development',
  __NEXT_PROCESSED_ENV: 'true',
  API_URL: 'http://localhost:3000'
} 서버

 

브라우저 콘솔:

{} '클라이언트'

 

 

---

api 요청을 위해 브라우저에서도 API_URL을 사용하려 할 때, 브라우저에서도 환경변수가 노출되도록 하기 위해서는 변수명에 접두어로 NEXT_PUBLIC_을 붙어주어야 함.

 

// .env.local

NEXT_PUBLIC_API_URL = http://localhost:3000

import React from "react";
import { GetServerSideProps, NextPage } from "next";
import TodoList from "./components/TodoList";
import { TodoType } from "../types/todo";
import { getTodosAPI } from "../lib/api/todo";

interface IProps {
  todos: TodoType[];
}

const app: NextPage<IProps> = ({ todos }) => {
  console.log(process.env.NEXT_PUBLIC_API_URL, "클라이언트");
  return <TodoList todos={todos} />;
};

export const getServerSideProps: GetServerSideProps = async () => {
  try {
    console.log(process.env, "서버");
    const { data } = await getTodosAPI();
    return { props: { todos: data } };
  } catch (e) {
    // console.log(e);
    return { props: { todos: [] } };
  }
};

export default app;

브라우저 콘솔:

http://localhost:3000 클라이언트

 

---

import Axios from "axios";

const axios = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

export default axios;

 

Tip.

next.config.js 에서 rewrite하기

const API_KEY = process.env.API_KEY;

module.exports = {
  reactStrictMode: true,
}
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};