How to Create a Preview Button in Strapi v3 for Next.js

[mckennapaul27]

Every day is a learning day at Strapi

I have found the solution to load .env variables for this preview link…

Please refer to the following discussions:

Not able to access dotenv variables in the Strapi Admin front-end for different env's #5599

Responses to the discussion on Github alexandrebodin271d ago Maintainer Hi That’s not how the client side works The env variables are created at build time in the js bundle not at runtime. vinod77271d ago Author @alexandrebodin Thanks for your response. I know env variables are created at build time. But i should be able to access dotenv variables at build time as well. At Build Time i want to get: On DEV: process.env.NODE_ENV: dev On UAT: process.env.NODE_ENV: uat …

Use .env in local plugin

Hello, This is not how the frontend works. .env variables are not passed to the client-side. To pass env variable to the administration panel you should customize webpack config, 1. create the file at the following route: {strapi-project}/admin/admin.config.js: module.exports = { webpack: (config, webpack) => { // Add your variable using the DefinePlugin config.plugins.push( new webpack.DefinePlugin({ //All your custom ENVs that you want to use in frontend CU…

Essentially, we cannot load .env variables into the “frontend” of Strapi (the frontend includes plugins and extensions are plugin extensions).

Therefore we have to customise webpack.

Create a file ./admin/admin.config.js with the folllowing:

module.exports = {
    webpack: (config, webpack) => {
        const definePlugin = new webpack.DefinePlugin({
            CLIENT_URL: JSON.stringify(process.env.CLIENT_URL),
            CLIENT_PREVIEW_SECRET: JSON.stringify(
                process.env.CLIENT_PREVIEW_SECRET
            ),
        });
        config.plugins.push(definePlugin);
        return config;
    },
};

Then do following:

1. delete the ./build and ./cache folders.
2. yarn build --clean

Now you will be able to access CLIENT_URL and CLIENT_PREVIEW_SECRET in ./extensions/admin/src/InjectedComponents/ExternalLink/index.js