How i can set target: 'serverless' in file next.config.js

[approached]

Hi @ all,

i have next.config.js file:

const withSass = require("@zeit/next-sass");
const tailwindCss = require("tailwindcss");
module.exports = withSass({
        webpack(config, options) {
            const rules = [{
                test: /\.scss$/,
                use: [
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: [tailwindCss("./tailwind.config.js")]
                        }
                    },
                    {loader: "sass-loader"}
                ]
            }
            ];
            return {
                ...config,
                module: {
                    ...config.module,
                    rules: [...config.module.rules, ...rules]
                }
            };
        }
    },
);

For serverless deployment me need to set:

module.exports = {
  target: "serverless"
};

But how can i do it? By the way how i can debug the module.exports output?

[merelinguist]

Do this:

const withSass = require("@zeit/next-sass");
const tailwindCss = require("tailwindcss");
module.exports = withSass({
        webpack(config, options) {
            const rules = [{
                test: /\.scss$/,
                use: [
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: [tailwindCss("./tailwind.config.js")]
                        }
                    },
                    {loader: "sass-loader"}
                ]
            }
            ];
            return {
                ...config,
                module: {
                    ...config.module,
                    rules: [...config.module.rules, ...rules]
                }
            };
        }
    },
    target: 'serverless'
);

N.B. Deployments to ZEIT Now will automatically enable this target. You do not need to opt-into it yourself, but you can.

For "debugging", you could do something like this:

const withSass = require("@zeit/next-sass");
const tailwindCss = require("tailwindcss");

const config = withSass({
        webpack(config, options) {
            const rules = [{
                test: /\.scss$/,
                use: [
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: [tailwindCss("./tailwind.config.js")]
                        }
                    },
                    {loader: "sass-loader"}
                ]
            }
            ];
            return {
                ...config,
                module: {
                    ...config.module,
                    rules: [...config.module.rules, ...rules]
                }
            };
        }
    },
);

// check our config
console.log(config)

module.exports = config

[approached]

Thank you so much for the clearness.
This code works for me good:

const withSass = require("@zeit/next-sass");
const tailwindCss = require("tailwindcss");
module.exports = withSass({
        webpack(config, options) {
            const rules = [{
                test: /\.scss$/,
                use: [
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: [tailwindCss("./tailwind.config.js")]
                        }
                    },
                    {loader: "sass-loader"}
                ]
            }
            ];
            return {
                ...config,
                module: {
                    ...config.module,
                    rules: [...config.module.rules, ...rules]
                }
            };
        }
        target: 'serverless'
    },    
);