[Documentation]: Instruction how to make it work with next.js

[bolora]

Description

For https://cloudscape.design/get-started/integration/using-cloudscape-components/

There should be instructions for nextJS installation to address this issue:

./node_modules/@cloudscape-design/components/alert/styles.scoped.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@cloudscape-design/components/alert/styles.css.js

Along with installing cloudscape library you need to do the following if using NextJS:

• npm install next-transpile-modules
• Update next.config.js file
  • Import next-transpile-modules: const withTranspileModules = require('next-transpile-modules');
  • Add this into the withPlugins declaration at the bottom: [withTranspileModules(['@cloudscape-design/components'])],

Alternatively you can address this: https://nextjs.org/docs/messages/css-npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[zhubby]

👍

[david-martyn-ford]

Usage with NX.

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
const withTranspileModules = require('next-transpile-modules');
const withPlugins = require('next-compose-plugins');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

module.exports = withPlugins([
  withNx(nextConfig),
  withTranspileModules(['@cloudscape-design/components']),
]);

[FlorianDr]

Thank you everyone for the suggestions. We will add a reference to this issue to the Integration page to contain integration advice in one place.