Next.js .env설정 및 Nextauth URL설정하기, 포트변경

1.Next.js .env파일 사용하기

프로젝트 최상단에 .env파일을 설정한뒤사용할 수 있다. 그중 순서대로 나열해보면

 

1-1)로컬 환경에서 env사용하기 : .env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
//서버에서 사용할 시는 위와같이 사용한다.

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
//브라우저에서 사용할시는 NEXT_PUBLIC_키워드를 사용해준다.

 

사용하는방법 아래와같이 process.env.변수명 으로 사용할 수 있다.

//서버에서 사용할시
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}


//브라우저에서 사용할시
import setupAnalyticsService from '../lib/my-analytics-service'
 
// 'NEXT_PUBLIC_ANALYTICS_ID' can be used here as it's prefixed by 'NEXT_PUBLIC_'.
// It will be transformed at build time to `setupAnalyticsService('abcdefghijk')`.
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
 
function HomePage() {
  return <h1>Hello World</h1>
}
 
export default HomePage

 

2)그외 우선순위

우선순위에 맞춰 테스트를 해볼 수 있다.

 

https://velog.io/@milkboy2564/Next.js-env%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%A0%95%EB%A6%AC

https://curryyou.tistory.com/503

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

 

2.Nextauth URL설정하기

npm run dev실행 혹은 배포후 테스트 할 때 URL변경 설정을 해주지 않으면 Nextauth를 사용한 로그인, 로그아웃시

 

배포된 주소를 기반으로 리다이렉트가 되지 않는다 이걸 방지하기 위해선 최상단에 .env파일을 만들어주고

 

아래와 같이 설정해주면된다.

//.env

NEXTAUTH_URL=http://배포할주소:포트

//NEXTAUTH_URL=https://example.com

 

https://next-auth.js.org/configuration/options#environment-variables

 

3.Next.js 포트 변경해서 실행하기

 기본적으로 next.js를 npm run dev로 실행하면 3000포트로 실행이 된다.

 

아래와같이 PORT=변경할포트 npm run dev로 실행하면 변경된 포트에서 테스트를 해볼 수 있다.

PORT=80 npm run dev

 

위와같이 커맨드에서도 가능하지만

package.json

"scripts": {
  "dev": "next -p 80",
  "build": "next build",
  "start": "next start -p 80",
},

 

이와같이 json파일을 수정해서도 처리할 수 있다.