docs(nextjs-pages): create NextJS example with pages router (#4583)

Part of #4091

---------

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

.eslintignore

@@ -17,4 +17,5 @@ scripts
 shared
 packages/cra-template
 CodeGen.tsx
+examples
 

examples/nextjs-pages/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-pages/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-pages/README.md

@@ -0,0 +1,55 @@
+## UI5 Web Components React - Next.js Pages Router Example
+
+This example shows how to use the [Next.js](https://nextjs.org/) Pages Router with UI5 Web Components for React.
+It includes the required adjustments in `src/pages/_app.tsx` and `src/pages/_document.tsx` as well as a very simple Todo
+App.
+
+## How to use this template
+
+```bash
+npx degit SAP/ui5-webcomponents-react/examples/nextjs-pages#main my-project
+cd my-project
+```
+
+## Getting Started
+
+First, install the node_modules:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `src/pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed
+on [http://localhost:3000/api/todods](http://localhost:3000/api/todos). This endpoint can be edited
+in `src/pages/api/todos.ts`.
+
+The `src/pages/api` directory is mapped to `/api/*`. Files in this directory are treated
+as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
+are welcome!

examples/nextjs-pages/components/AppShell/AppShell.module.css

@@ -0,0 +1,11 @@
+.appShell {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+.scrollContainer {
+    height: calc(100vh - var(--_ui5_shellbar_root_height));
+    overflow-y: auto;
+    position: relative;
+}

examples/nextjs-pages/components/AppShell/index.tsx

@@ -0,0 +1,30 @@
+import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
+import { Button, ShellBar } from '@ui5/webcomponents-react/ssr';
+import { useRouter } from 'next/router';
+import { ReactNode } from 'react';
+import classes from './AppShell.module.css';
+
+export function AppShell(props: { children: ReactNode }) {
+  const router = useRouter();
+  return (
+    <>
+      <div className={classes.appShell}>
+        <ShellBar
+          primaryTitle={'UI5 Web Components for React Examples'}
+          secondaryTitle={'NextJS - Pages Router'}
+          startButton={
+            router.asPath !== '/' && (
+              <Button
+                icon={navBackIcon}
+                onClick={() => {
+                  router.back();
+                }}
+              />
+            )
+          }
+        />
+        <div className={classes.scrollContainer}>{props.children}</div>
+      </div>
+    </>
+  );
+}

examples/nextjs-pages/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true
+};
+
+module.exports = nextConfig;