{"id":20393361,"url":"https://github.com/foxitsoftware/foxitpdfsdkforweb-nextjs-example","last_synced_at":"2025-03-05T00:26:34.824Z","repository":{"id":166220329,"uuid":"626178586","full_name":"foxitsoftware/FoxitPDFSDKForWeb-NextJS-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-02T01:21:03.000Z","size":4519,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-15T10:28:21.547Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foxitsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-11T00:42:22.000Z","updated_at":"2024-08-12T09:26:48.000Z","dependencies_parsed_at":"2024-06-23T11:49:44.267Z","dependency_job_id":"359112b6-cc71-431e-972d-e0aa02872499","html_url":"https://github.com/foxitsoftware/FoxitPDFSDKForWeb-NextJS-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-NextJS-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-NextJS-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-NextJS-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-NextJS-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/FoxitPDFSDKForWeb-NextJS-Example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241942793,"owners_count":20046432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:48:23.105Z","updated_at":"2025-03-05T00:26:34.783Z","avatar_url":"https://github.com/foxitsoftware.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Integrating Foxit PDF SDK for Web with Next.js\n\nThis is a minimal example project that demonstrates how to integrate the [Foxit PDF SDK for Web](https://developers.foxit.com/products/pdf-sdk/) into a Next.js application. The project was created using `create-next-app` and is designed to serve as a starting point for developers who want to add PDF viewing and annotation capabilities to their Next.js applications.\n\n## Getting Started\n\nYou have two options to get started with this example:\n\n1. **Use this project as a boilerplate**: If you want to use this project as a boilerplate, you can clone this repository and start building on top of it. This approach allows you to add features like App Router or make any other modifications you need.\n\n2. **Start from scratch**: If you prefer to start from scratch, you can create a new Next.js project using `create-next-app` and integrate the Foxit PDF SDK for Web into your new project.\n\n### Prerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (version specified in the project's `.nvmrc`)\n- [npm](https://www.npmjs.com/) (usually comes bundled with Node.js)\n\n### Use as boilerplate\n\n1. **Clone the repository:**\n\n    ```bash\n    git clone git@github.com:foxitsoftware/FoxitPDFSDKForWeb-NextJS-Example.git nextjs-websdk\n    ```\n\n1. **Install dependencies:**\n\n    ```bash\n    cd nextjs-websdk\n    npm install\n    ```\n\n1. **Obtain license key:**\n\n    To use the Foxit PDF SDK for Web, you need to obtain licence key from our [sales](https://developers.foxit.com/contact/). Once you have the license key, update the `licenseSN` and `licenseKey` values defined in `src/pages/index.js`.\n\n1. **Start the development server:**\n\n    ```bash\n    npm run dev\n    ```\n\n    This will start the Next.js development server, and you can access the application at \u003chttp://localhost:3000\u003e.\n\n### Start from scratch\n\nThe official Next.js documentation suggests creating a new project via `create-next-app`. To create a project, run:\n\n```bash\nnpx create-next-app@latest\n```\n\nOn installation, you'll see the following prompts:\n\n```log\nWhat is your project named? nextjs-websdk\nWould you like to use TypeScript? No / Yes\nWould you like to use ESLint? No / Yes\nWould you like to use Tailwind CSS? No / Yes\nWould you like to use `src/` directory? No / Yes\nWould you like to use App Router? (recommended) No / Yes\nWould you like to customize the default import alias (@/*)? No / Yes\nWhat import alias would you like configured? @/*\n```\n\nAfter the prompts, `create-next-app` will create a folder with your project name and install required dependencies.\n\nFrom here, you can refer to the later section [Integrating into your own project](#integrating-into-your-own-project) to integrate Foxit PDF SDK for Web into your project.\n\nFor more details on how to create a Next.js project, we recommend that you refer to the Next js official documentation:\n\n\u003e \u003chttps://www.npmjs.com/package/create-next-app\u003e\n\u003e \u003chttps://nextjs.org/docs/getting-started/installation\u003e\n\n## Integrating into your own project\n\n### Installation\n\nInstall the Foxit PDF SDK for Web into your project using following command:\n\n```bash\nnpm install @foxitsoftware/foxit-pdf-sdk-for-web-library\n```\n\nAnd then, install `copy-webpack-plugin` as develop dependency:\n\n```bash\nnpm install -D copy-webpack-plugin\n```\n\nThis will be used to configure webpack to copy the static resources of Foxit PDF SDK for Web into public directory.\n\n### Modify Next.js Configuration\n\nDue to the Foxit PDF SDK for Web requiring additional static resources during runtime, you need to configure Next.js webpack settings. In your *next.config.mjs* file, add the following webpack configuration:\n\n```js\nimport CopyWebpackPlugin from 'copy-webpack-plugin';\nimport path from 'path';\nconst libraryModulePath = path.resolve('node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library');\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: false,\n  webpack: (config, options) =\u003e {\n    config.plugins.push(\n      new CopyWebpackPlugin({\n        patterns: [\n          {\n            from: path.resolve(libraryModulePath, 'lib'),\n            to: path.resolve('./public/FoxitPDFSDKForWeb/lib'),\n            force: true,\n            info: {minimized: true},\n          }\n        ]\n      }),\n    );\n    return config;\n  }\n}\n\nexport default nextConfig;\n```\n\nThis configuration uses *copy-webpack-plugin* to copy static resources from `node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib` to the `public/FoxitPDFSDKForWeb/lib` directory.\n\n**Note:**\n\n\u003e Prior to `create-next-app@14.1.0`, the configuration file was named `next.config.js` (Refer to this PR: \u003chttps://github.com/vercel/next.js/pull/60494\u003e),\n\u003e and should be written in CommonJS style.\n\u003e\n\n### Apply Foxit PDF SDK for Web in Next.js\n\nIn your Next.js components or pages where you want to use the PDF SDK, import the necessary modules and initialize the SDK as needed.\n\nHere's a basic example of how you might integrate the PDF SDK into a Next.js component, with the key steps demonstrated in the following simplified code:\n\n```js\nfunction Home() {\n    const elementRef = useRef();\n    const pdfuiRef = useRef();\n    useEffect(() =\u003e {\n        // Determine if the element instance is available\n        if(!elementRef.current) {\n            return;\n        }\n        // Avoid PDFUI instances from being initialized multiple times in the same page\n        if(!!pdfuiRef.current) {\n            return;\n        }\n        const pdfui = new UIExtension.PDFUI({\n            // ...\n        });\n        // Save PDFUI instance to pdfuiRef\n        pdfuiRef.current = pdfui;\n    }, [elementRef])\n    \n    return (\u003c\u003e\n        { /* ... */ }\n        \u003cdiv ref={elementRef}\u003e\u003c/div\u003e\n        { /* ... */ }\n    \u003c/\u003e\n    )\n}\n```\n\nFor completed implementation, please refer to the code in `src/pages/index.js`.\n\nIn this example, for the convenience of demonstration, we directly save the PDFUI instance on `Ref`. In actual development, we recommend saving the PDFUI instance on `Context`, which makes it easier to share PDFUI instances among different components.\n\nFor more information about the usage of Foxit PDF SDK for Web, please refer to the official documentation.\n\n\u003e Developer Guide: \u003chttps://webviewer-demo.foxit.com/docs/developer-guide\u003e\n\u003e\n\u003e API Reference: \u003chttps://webviewer-demo.foxit.com/docs/api_reference/html/index.html\u003e\n\n## External services\n\nThe Foxit PDF SDK for Web offers various external services, including the snapshot service and the signature service (available in Linux and Windows versions). These services are located in the server directory. Below, we take the snapshot service as an example to explain how to configure and use these services in Next.js.\n\n### Modify Next.js Configuration Again\n\nFirst, based on the configuration mentioned above, we add the `copy-webpack-plugin` configuration to copy the server directory into the deployment directory:\n\n```js\nconst nextConfig = {\n  // ...\n  webpack: (config, options) =\u003e {\n    config.plugins.push(\n      new CopyWebpackPlugin({\n        patterns: [\n          // ...\n          {\n            from: path.resolve(libraryModulePath, 'server'),\n            to: path.resolve('./public/FoxitPDFSDKForWeb/server'),\n            force: true,\n            info: {minimized: true},\n          }\n        ]\n      }),\n    );\n    return config;\n  }\n}\n```\n\nNext, we configure the proxy to prevent cross-origin requests between the frontend and the server:\n\n```js\nconst nextConfig = {\n    async rewrites() {\n    return [\n      {\n        source: '/snapshot/:path*',\n        destination: 'http://localhost:3002/snapshot/:path*',\n      },\n    ]\n  },\n  // ...\n}\n```\n\nFor the complete configuration, please refer to [next.config.mjs](./next.config.mjs).\n\nAfter modifying the above configurations, we run `npm run dev` to start the development server, and open `http://localhost:3000` in the browser. Next.js will automatically start webpack, and the `node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/server` directory will be automatically copied to `public/FoxitPDFSDKForWeb/server`, while requests from `http://localhost:3000/snapshot/:path` will be proxied to `http://localhost:3002/snapshot/:path`.\n\n### Start snapshot server\n\nNavigate to `public/FoxitPDFSDKForWeb/server/snapshot`, and execute the following command:\n\n```shell\nnpm install\nnpm run start\n```\n\nAfter completing these operations, we can use the snapshot functionality.\n\n### Reference the `Service-Worker-Allowed` HTTP header\n\nStarting from FoxitPDFSDK for Web version `10.0.0`, since service worker is used, it is necessary to add this field in the HTTP response header of the Service Worker script. Its value is the maximum allowed scope path:\n\n```http\nService-Worker-Allowed /;\n```\n\n#### Nginx 配置示例\n\nIf you are using Nginx as your server, you can add the `Service-Worker-Allowed` response header by modifying the Nginx configuration file. Below is an example configuration：\n\n```nginx\nserver {\n    location /sw.js {\n        add_header Service-Worker-Allowed /;\n    }\n}\n```\n\n#### Node Dev Server 配置示例\n\nIf you use Node Dev Server for local development, you can add `Service-Worker-Allowed` response headers by configuring devServer. The following is a configuration example：\n\n```js\n// next.config.mjs\nmodule.exports = {\n    // 其他配置\n    async headers() {\n    return [\n      {\n        // Apply these headers to all routes in your application.\n        source: '/:path*',\n        headers: [\n          { key: 'Service-Worker-Allowed', value: '/' },\n        ],\n      },\n    ];\n  }\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-nextjs-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-nextjs-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-nextjs-example/lists"}