Hello! Playing with the new

NextJs

construct this week, and I found one nasty thing. I need to pass environment variables to the construct in order to provide Cognito User Pool Id and so but my Cognito User Pool is not built inside SST but in a different Cloudformation stack (with Serverless Framework). So I am using the

Fn.importValue

but this is not working 😄:

// backend stack export prefix
    const backendStackPrefix = `sls-cust-center-backend-${scope.stage}`;
    console.log(`UserPool: ` + `${backendStackPrefix}-CognitoUserPool`);
    console.log(`UserPool: ` + Fn.importValue(`${backendStackPrefix}-CognitoUserPool`));

    // frontend application built using NextJs
    new NextjsSite(this, "NextSite", {
      path: "../frontend-next",
      environment: {
        NEXT_PUBLIC_API: Fn.importValue(`${backendStackPrefix}-ServiceEndpoint`),
        NEXT_PUBLIC_COGNITO_REGION: this.region,
        NEXT_PUBLIC_COGNITO_USER_POOL_ID: Fn.importValue(`${backendStackPrefix}-CognitoUserPool`),
        NEXT_PUBLIC_COGNITO_APP_CLIENT_ID: Fn.importValue(`${backendStackPrefix}-CognitoUserPoolClient`),
        NEXT_PUBLIC_COGNITO_DOMAIN: Fn.importValue(`${backendStackPrefix}-CognitoDomain`),
        NEXT_PUBLIC_COGNITO_IDENTITY_POOL: Fn.importValue(`${backendStackPrefix}-CognitoIdentityPool`),
      },
    });

The value of the

Fn.importValue

is something like

${Token[TOKEN.351]}

so it cannot be used for the

next build

part of the

NextJs

construct operation. Do you know how to deal with that elegantly? (I was thinking of calling ListExportsCommand in the Stack but this is not elegant for sure!) Thanks!

Hey @Julien Bras, yeah those environment variables ie.

NEXT_PUBLIC_API

are not available at build time.

Hi @Frank! currently we are using the values only for CSR (

NEXT_PUBLIC_...

) but at the end of the day we need to provide the info to the frontend 🙂 . Do you see how I can pass the variables in a different way? Thanks!

If you are only using the values for CSR, it should already work. If you print out the value at build time, you will see its a unresolved token. The value will get resolved at deploy time.

i think it's the opposite, it will work if it's not used for CSR but only for SSR as the value will be resolved on Lambda functions that will take care of SSR... but CSR generation is done at build time and I have an issue. Nevermind, it's just me dealing with this new CSR/SSR dilemma on Next 😅. I will make some more test, but thanks again for the support!

Sorry Julien, I made a typo in my earlier comment, should work with CSR and SSR. Won’t work with SSG.