Some test text!
Web / Guides / Next.js
Platform
Documentation
This guide will help you integrate a free trial of WebViewer into a Next.js application on the browser. You can also checkout a ready to go sample on GitHub.
webviewer-nextjs-sample
repository:git clone https://github.com/PDFTron/webviewer-nextjs-sample.git
cd webviewer-nextjs-sample
npm install
This will automatically download required packages, and extract the Apryse WebViewer Package. Optionally, this can also be installed into an existing project by running npm i @pdftron/webviewer
npm start
Then open a browser and go to localhost:3000
to see the application.
npm i @pdftron/webviewer
Next we must copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public
and must be moved into a location that will be served and publicly accessible. In Nextjs, it will be public
folder.
Note: if you clone the GitHub project and run npm install
, this process is automated using the script copy-webviewer-files.js.
First, import WebViewer into your component. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/webviewer/public
in Nextjs public
folder.
import {useEffect, useRef} from 'react';
export default function HomePage() {
const viewer = useRef(null);
useEffect(() => {
import('@pdftron/webviewer').then(() => {
WebViewer(
{
path: '/webviewer/lib',
initialDoc: '/files/pdftron_about.pdf',
},
viewer.current,
).then((instance) => {
const { docViewer } = instance;
// you can now call WebViewer APIs here...
});
})
}, []);
return (
<div className="MyComponent">
<div className="header">React sample</div>
<div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
</div>
);
}
Then, run the app by running npm start
.
You can now checkout other guides like how to open your own documents or how to disable certain features .
Get the answers you need: Support