Add Next.js example for PSPDFKit integration

- Created a new Next.js example project demonstrating the integration of PSPDFKit for Web.
- Added essential files including package.json, README.md, and configuration files for Next.js setup.
- Implemented a basic layout with a PDF viewer using PSPDFKit.
- Included scripts for building and running the application, along with asset copying for PSPDFKit files.
- Added sample PDF document for demonstration purposes.
- Introduced .gitignore to exclude unnecessary files and directories.
- Provided detailed instructions in the README for getting started and running the example.

Author: ritz078

.gitignore

@@ -6,3 +6,4 @@ playwright-report
 pspdfkit-lib/
 
 open-iconic
+.next/

examples/laravel/package-lock.json

@@ -0,0 +1,5 @@
+.idea
+node_modules
+public/pspdfkit-lib
+.next
+.tool-versions

examples/nextjs/.gitignore

@@ -0,0 +1,42 @@
+The PSPDFKit Sample applications are licensed with a modified BSD
+license. In plain language: you're allowed to do whatever you wish
+with the code, modify, redistribute, embed in your products (free or
+commercial), but you must include copyright, terms of usage and
+disclaimer as stated in the license.
+
+You will require a commercial PSPDFKit License to run these examples
+in non-demo mode. Please refer to [email protected] for details.
+
+Copyright © 2017-present PSPDFKit GmbH.
+All rights reserved.
+
+Redistribution and use in source or binary forms,
+with or without modification, are permitted provided
+that the following conditions are met:
+
+- Redistributions of source code must retain the above copyright
+  notice, this list of conditions and the following disclaimer.
+
+- Redistributions in binary form must reproduce the above copyright
+  notice, this list of conditions and the following disclaimer in the
+  documentation and/or other materials provided with the
+  distribution.
+
+- Redistributions of PSPDFKit Samples must include attribution to
+  PSPDFKit, either in documentation or other appropriate media.
+
+- Neither the name of the PSPDFKit, PSPDFKit GmbH, nor its developers
+  may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

examples/nextjs/LICENSE

@@ -0,0 +1,63 @@
+# Nutrient Web SDK Example – Next.js
+
+This example shows how to integrate [Nutrient Web SDK](https://www.nutrient.io/web/) into a [Next.js](https://nextjs.org) app.
+
+## Prerequisites
+
+- [Node.js](http://nodejs.org/)
+
+## Support, Issues and License Questions
+
+PSPDFKit offers support for customers with an active SDK license via https://www.nutrient.io/support/request/
+
+Are you [evaluating our SDK](https://www.nutrient.io/try/)? That's great, we're happy to help out! To make sure this is fast, please use a work email and have someone from your company fill out our sales form: https://www.nutrient.io/sales/
+
+## Getting Started
+
+Clone the repo:
+
+```bash
+git clone https://github.com/PSPDFKit/pspdfkit-web-example-nextjs.git
+cd pspdfkit-web-example-nextjs
+```
+
+Install the project dependencies:
+
+yarn:
+
+```bash
+yarn
+```
+
+npm:
+
+```shell script
+npm install
+```
+
+## Running the Example
+
+We are ready to launch the app! 🎉
+
+yarn:
+
+```bash
+yarn dev
+```
+
+npm:
+
+```shell script
+npm run dev
+```
+
+You can now open http://localhost:3000 in your browser and enjoy!
+
+## License
+
+This software is licensed under a [modified BSD license](LICENSE).
+
+## Contributing
+
+Please ensure
+[you have signed our CLA](https://www.nutrient.io/guides/web/current/miscellaneous/contributing/) so that we can accept your contributions.

examples/nextjs/Readme.md

@@ -0,0 +1,23 @@
+import Script from "next/script";
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+const RootLayout = ({ children }) => {
+  return (
+    <html lang="en">
+      <head>
+        {/* Load PSPDFKit script using Next.js Script component */}
+        <Script
+          src="/pspdfkit-lib/pspdfkit.js"
+          strategy="beforeInteractive" // Load before the page becomes interactive to reference window.PSPDFKit in the client
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+};
+
+export default RootLayout;

examples/nextjs/app/layout.js

@@ -0,0 +1,41 @@
+// The "use client" directive is necessary for using React hooks like useRef or useEffect.
+// Without it, Next.js will throw a build error since hooks are not supported
+// in server components.
+
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+export default function App() {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (container && typeof PSPDFKit !== "undefined" && window.PSPDFKit) {
+      const { PSPDFKit } = window;
+
+      PSPDFKit.load({
+        container,
+        document: "/example.pdf",
+        baseUrl: `${window.location.protocol}//${window.location.host}/`,
+      });
+    }
+
+    return () => PSPDFKit?.unload(container);
+  }, []);
+
+  return (
+    <>
+      <div ref={containerRef} style={{ height: "100vh" }} />
+      <style global jsx>
+        {`
+          * {
+            margin: 0;
+            padding: 0;
+          }
+        `}
+      </style>
+    </>
+  );
+}

examples/nextjs/app/page.js

@@ -0,0 +1,23 @@
+// Exclude pspdfkit from the client-side bundle to optimize performance
+// and avoid potential conflicts with the script loaded in layout.js
+const nextConfig = {
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.externals = config.externals || [];
+      config.externals.push({
+        pspdfkit: "pspdfkit",
+      });
+    }
+
+    return config;
+  },
+  experimental: {
+    turbo: {
+      resolveAlias: {
+        pspdfkit: "pspdfkit",
+      },
+    },
+  },
+};
+
+module.exports = nextConfig;