Skip to content

Commit 573342d

Browse files
ritz078ritz078
committed
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.
1 parent eb16cab commit 573342d

12 files changed

+742
-5
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ playwright-report
66
pspdfkit-lib/
77

88
open-iconic
9+
.next/

‎examples/laravel/package-lock.json

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/nextjs/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.idea
2+
node_modules
3+
public/pspdfkit-lib
4+
.next
5+
.tool-versions

‎examples/nextjs/LICENSE

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

‎examples/nextjs/Readme.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Nutrient Web SDK Example – Next.js
2+
3+
This example shows how to integrate [Nutrient Web SDK](https://www.nutrient.io/web/) into a [Next.js](https://nextjs.org) app.
4+
5+
## Prerequisites
6+
7+
- [Node.js](http://nodejs.org/)
8+
9+
## Support, Issues and License Questions
10+
11+
PSPDFKit offers support for customers with an active SDK license via https://www.nutrient.io/support/request/
12+
13+
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/
14+
15+
## Getting Started
16+
17+
Clone the repo:
18+
19+
```bash
20+
git clone https://github.com/PSPDFKit/pspdfkit-web-example-nextjs.git
21+
cd pspdfkit-web-example-nextjs
22+
```
23+
24+
Install the project dependencies:
25+
26+
yarn:
27+
28+
```bash
29+
yarn
30+
```
31+
32+
npm:
33+
34+
```shell script
35+
npm install
36+
```
37+
38+
## Running the Example
39+
40+
We are ready to launch the app! 🎉
41+
42+
yarn:
43+
44+
```bash
45+
yarn dev
46+
```
47+
48+
npm:
49+
50+
```shell script
51+
npm run dev
52+
```
53+
54+
You can now open http://localhost:3000 in your browser and enjoy!
55+
56+
## License
57+
58+
This software is licensed under a [modified BSD license](LICENSE).
59+
60+
## Contributing
61+
62+
Please ensure
63+
[you have signed our CLA](https://www.nutrient.io/guides/web/current/miscellaneous/contributing/) so that we can accept your contributions.

‎examples/nextjs/app/layout.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Script from "next/script";
2+
3+
export const metadata = {
4+
title: "Create Next App",
5+
description: "Generated by create next app",
6+
};
7+
8+
const RootLayout = ({ children }) => {
9+
return (
10+
<html lang="en">
11+
<head>
12+
{/* Load PSPDFKit script using Next.js Script component */}
13+
<Script
14+
src="/pspdfkit-lib/pspdfkit.js"
15+
strategy="beforeInteractive" // Load before the page becomes interactive to reference window.PSPDFKit in the client
16+
/>
17+
</head>
18+
<body>{children}</body>
19+
</html>
20+
);
21+
};
22+
23+
export default RootLayout;

‎examples/nextjs/app/page.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// The "use client" directive is necessary for using React hooks like useRef or useEffect.
2+
// Without it, Next.js will throw a build error since hooks are not supported
3+
// in server components.
4+
5+
"use client";
6+
7+
import React, { useEffect, useRef } from "react";
8+
9+
export default function App() {
10+
const containerRef = useRef(null);
11+
12+
useEffect(() => {
13+
const container = containerRef.current;
14+
15+
if (container && typeof PSPDFKit !== "undefined" && window.PSPDFKit) {
16+
const { PSPDFKit } = window;
17+
18+
PSPDFKit.load({
19+
container,
20+
document: "/example.pdf",
21+
baseUrl: `${window.location.protocol}//${window.location.host}/`,
22+
});
23+
}
24+
25+
return () => PSPDFKit?.unload(container);
26+
}, []);
27+
28+
return (
29+
<>
30+
<div ref={containerRef} style={{ height: "100vh" }} />
31+
<style global jsx>
32+
{`
33+
* {
34+
margin: 0;
35+
padding: 0;
36+
}
37+
`}
38+
</style>
39+
</>
40+
);
41+
}

‎examples/nextjs/next.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Exclude pspdfkit from the client-side bundle to optimize performance
2+
// and avoid potential conflicts with the script loaded in layout.js
3+
const nextConfig = {
4+
webpack: (config, { isServer }) => {
5+
if (!isServer) {
6+
config.externals = config.externals || [];
7+
config.externals.push({
8+
pspdfkit: "pspdfkit",
9+
});
10+
}
11+
12+
return config;
13+
},
14+
experimental: {
15+
turbo: {
16+
resolveAlias: {
17+
pspdfkit: "pspdfkit",
18+
},
19+
},
20+
},
21+
};
22+
23+
module.exports = nextConfig;

0 commit comments

Comments
 (0)