8eaabe2fb0
Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ```
2 KiB
Example app with carbon-components-react
This example features how you use IBM's carbon-components-react (Carbon Design System) with Next.js.
Create your own theme with Carbon Design System's theming tools and put it all together as demonstrated in static/myCustomTheme.scss
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example with-carbon-components with-carbon-components-app
# or
yarn create next-app --example with-carbon-components with-carbon-components-app
Deploy it to the cloud with Vercel (Documentation).
Optimizations
In this example we import carbon components in the styles/custom-theme.scss file like this:
@import '~carbon-components/scss/globals/scss/styles.scss';
When we start to consider the performance of this approach, however, it becomes clear that this will include every single bit of CSS that Carbon outputs. Sometimes, you totally need everything that the project provides, but for a good number of teams you may find yourself using only a subset of our components. Here is a great article about how you can optimize your application using carbon components: https://medium.com/carbondesign/minimal-css-with-carbon-b0c089ccfa71