diff --git a/README.md b/README.md index 00257237a4e..e9dde71480d 100644 --- a/README.md +++ b/README.md @@ -89,9 +89,9 @@ In about an hour you will create a business dashboard from scratch and get famil [Here](https://www.youtube.com/watch?v=zyOxgjoSnGw) you can find the video of our session for the SAP Devtoberfest 2023 (aired Sep 29, 2023). There we briefly explain why UI5 Web Components for React exist at all, where the project fits into the SAP UI stack and what advantages our wrapper has over implementations that use pure ui5-webcomponents. For the main part, we show how you could create a simple Movie Database UI, first by using our `Vite` template and then with our `Next.js` template. -### Create a new React app using our Templates +### Examples & Templates -You can find a curated list of project templates on our [Project Templates page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates--docs). +You can find a curated list of project templates and examples on our [Project Templates & Examples page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates-examples--docs). ### Add `@ui5/webcomponents-react` to an existing app diff --git a/docs/Welcome.mdx b/docs/Welcome.mdx index 146afdf9510..4561fa30051 100644 --- a/docs/Welcome.mdx +++ b/docs/Welcome.mdx @@ -38,9 +38,9 @@ Then take a look at our [Tutorial Mission](https://developers.sap.com/mission.re There you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.
In about an hour you will create a business dashboard from scratch and get familiar with some React basics in case you don't know them already. -### Templates +### Examples & Templates -You can find a curated list of project templates on our [Project Templates page](?path=/docs/project-templates--docs). +You can find a curated list of project templates and examples on our [Project Templates & Examples page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates-examples--docs). ### Add `@ui5/webcomponents-react` to an existing app diff --git a/docs/knowledge-base/ServerSideRendering.mdx b/docs/knowledge-base/ServerSideRendering.mdx index 915d8380ebd..a61bc926062 100644 --- a/docs/knowledge-base/ServerSideRendering.mdx +++ b/docs/knowledge-base/ServerSideRendering.mdx @@ -19,7 +19,7 @@ We're happy to announce that starting from **v1.17.0**, UI5 Web Components for R ### Create a new project -The best way to start using UI5 Web Components in Next.js is using one of our [templates](https://sap.github.io/ui5-webcomponents-react/?path=/docs/project-templates--docs). +The best way to start using UI5 Web Components in Next.js is using one of our [templates](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates-examples--docs#templates). We have templates available for both the pages and the app router. ### Add to existing project @@ -29,13 +29,13 @@ In case you already have an existing Next.js project and want to add UI5 Web Com As UI5 Web Components for React is using `react-jss` internally, you need to apply some changes to your `_app` and `_document` file (in case you are using the pages router). You can copy these changes either from the official [next.js-react-jss example](https://github.com/vercel/next.js/tree/canary/examples/with-react-jss) or from our [pages router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-pages). -In case you are already using the app router, you can copy the `react-jss` setup from the `app/CssRegistry.tsx` in our [app router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app). Make sure to add this component to your root layout! +In case you are already using the app router, you can copy the `react-jss` setup from the `app/CssRegistry.tsx` in our [app router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app). Make sure to add this component to your root layout! ### Common Pitfalls #### Icon and Feature Imports in Server Components -Some UI5 Web Component features rely on the registration of a component during runtime on the client. +Some UI5 Web Component features rely on the registration of a component during runtime on the client. The most common of these are icon imports (e.g. `import '@ui5/webcomponents-icons/dist/add.js';`), feature imports (e.g. `import '@ui5/webcomponents/dist/features/FormSupport.js';` and asset imports (e.g. `import '@ui5/webcomponents-react/dist/Assets.js';`). In order to fulfill their purpose in your application, you must ensure that these imports are only used in client components (the file or a parent component must contain the `'use client';` directive).