배포를 하기 위해서는 몇가지 단계가 필요하다.
1. 코드 재정리
: console.log 등 과 같이 쓸데 없는 코드를 지우고, 불필요한 코드를 삭제, 정리한다.
2. 메타 데이터의 삽입
: meta data인 title, descrition, viewport 등을 추가해줍니다.
<title> Calorie Calculator </title>
<meta name="description" content="this page calculate foods calorie what you eat" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3. 환경변수를 추가해줍니다.
직접, next.config.js 를 만져 환경변수를 추가 해 줄 수 있고
https://nextjs.org/docs/api-reference/next.config.js/introduction
next.config.js: Introduction | Next.js
learn more about the configuration file used by Next.js to handle your application.
nextjs.org
Vercel나 Heroku 의 DashBoard 에서 따로 추가해 줄 수도 있습니다.
4. 기능을 최종 점검하고 배포합니다!
<해볼까!>
0. 메타데이터의 삽입 [기본]
import Head from "next/head";
(컴포넌트 함수 안에)
<Head>
<meta name=... content=... />
</Head>
1. 메타데이터의 삽입 [전체]
import "../styles/globals.css";
import Layout from "../components/ui/layout/layout";
import { SessionProvider } from "next-auth/react";
import Head from "next/head";
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
return (
<SessionProvider session={session}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<Layout>
<Component {...pageProps} />
</Layout>
</SessionProvider>
);
}
export default MyApp;
2. 메타데이터의 삽입 [개별]
function CalorieCalculator(props) {
const { findResult } = props;
return (
<div>
<Head>
<title> Calorie Calculator </title>
<meta
name="description"
content="this page calculate foods calorie what you eat"
/>
</Head>
...
3. 환경변수의 추가 ( next.config.js )
next/constants 를 열어, 함수를 import 한 다음, 그 상황에 맞는 데이터를 넣어줍니다.
Devolop 환경, Build 환경 등... phase 를 활용하여, 조건문을 적을 수 있습니다.
각 단계에 맞춰, next.config.js 는 자동으로 평가되고, 실행됩니다.
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
module.exports = nextConfig;
module.exports = (phase) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
env: {
mongodb_username: "...",
mongodb_password: "...",
mongodb_clustername: "...",
SECRET: "...",
JWT_SECRET: "...,
},
};
}
return {
env: {
mongodb_username: "...",
mongodb_password: "...",
mongodb_clustername: "...",
SECRET: "...",
JWT_SECRET: "...",
},
};
};
4. 환경변수의 사용 ( process.env )
import { MongoClient } from "mongodb";
import bcrypt from "bcrypt";
const MongodbURI = `mongodb+srv://${process.env.mongodb_username}:${process.env.mongodb_password}@${process.env.mongodb_clustername}.xpihqcv.mongodb.net/?retryWrites=true&w=majority`;
export function connectDb() {
어디서든 {proceess.env.환경변수이름} 으로 사용 가능합니다.
배포준비 끝!
댓글