amazon-cognitoaws-amplifynextjs14

Next JS - getting the base localhost url to use in client side

I'm using Cognito in my Next JS (v14.0.3) app. To integrate, I utilized aws-amplify library. Following is my aws configuration file

... 

const awsConfig: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolId: NEXT_PUBLIC_USER_POOL_ID,
      userPoolClientId: NEXT_PUBLIC_CLIENT_ID,
      loginWith: {
        oauth: {
          domain: NEXT_PUBLIC_COGNITO_DOMAIN,
          scopes: ['openid', 'email', 'profile'],
          redirectSignIn: [BASE_URL],
          redirectSignOut: [BASE_URL],
          responseType: 'code',
        },
      },
    },
  },
};

export default awsConfig;

I need my BASE_URL to be http://localhost:3000 when I'm in dev mode, while https://my-prod-site.com when in prod mode. How should I do it?

I tried this

const BASE_URL =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:' + process.env.PORT
    : process.env.HOST_URL;

It works on the server side, BASE_URL is getting set to http://localhost:3000. But this export file is used in the client side, so I'm guessing process.env.PORT is rendered undefined, since PORT is not prefixed by NEXT_PUBLIC_. Is updating my environment variables with a NEXT_PUBLIC_ prefixed value my only way?

Solution

  • Here's a suggestion to set up BASE_URL

    const BASE_URL = process.env.NODE_ENV === 'production' ?
  process.env.PRODUCTION_BASE_URL : (
    typeof window !== 'undefined' ?
      window.location.origin : 'http://localhost:' + process.env.PORT
  )

    I'm assuming you can gather your production url https://my-prod-site.com from an environment variable. To match the aforementioned code sample, you can add the following line to your environment variable file (.env / .env.local / .env.preview / .env.test / vercel environment configuration dashboard - whichever is applicable) -

    PRODUCTION_BASE_URL=https://my-prod-site.com

    You have to remember that Next JS will go through this file twice, once during server side rendering and one in the client side.