Skip to content

nextjs-getting-started.md

Latest commit

 

History

History
187 lines (127 loc) · 6.42 KB

nextjs-getting-started.md

File metadata and controls

187 lines (127 loc) · 6.42 KB
layout post
title React getting started with Next.js | Syncfusion
description Check out and learn here all about how to use the Syncfusion React PDF Viewer in the Next.js project.
control PDF Viewer
platform document-processing
documentation ug
domainurl

Creating a Next.js application using Syncfusion React PDF Viewer

This guide shows how to set up a Next.js application and integrate the Syncfusion® React PDF Viewer component.

What is Next.js?

Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.

Prerequisites

Before getting started with the Next.js application, ensure the following prerequisites are met:

  • Node.js 18.17 or later.

  • The application is compatible with macOS, Windows, and Linux operating systems.

  • See the System requirements for detailed platform requirements.

Create a Next.js application

To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn.

{% tabs %} {% highlight bash tabtitle="NPM" %}

npx create-next-app@latest

{% endhighlight %} {% highlight bash tabtitle="YARN" %}

yarn create next-app

{% endhighlight %} {% endtabs %}

Using one of the above commands will prompt for project configuration options.

  • Define the project name. For example: ej2-next-js-pdfviewer. {% tabs %} {% highlight bash tabtitle="CMD" %}

√ What is your project named? » ej2-next-js-pdfviewer

{% endhighlight %} {% endtabs %}

  • Select the required packages. {% tabs %} {% highlight bash tabtitle="CMD" %}

√ What is your project named? ... ej2-next-js-pdfviewer √ Would you like to use TypeScript? ... No / Yes √ Would you like to use ESLint? ... No / Yes √ Would you like to use Tailwind CSS? ... No / Yes √ Would you like to use src/ directory? ... No / Yes √ Would you like to use App Router? (recommended) ... No / Yes √ Would you like to customize the default import alias? ... No/ Yes Creating a new Next.js app in D:\ej2-next-js-pdfviewer.

{% endhighlight %} {% endtabs %}

  • After the project is created, navigate to the project directory: {% tabs %} {% highlight bash tabtitle="CMD" %}

cd ej2-next-js-pdfviewer

{% endhighlight %} {% endtabs %}

The application is ready to run with default settings. Next, add Syncfusion® components to the project.

Install Syncfusion® React packages

Syncfusion® React packages are available on npm. Install the package for the component required by the project.

This guide uses the React PDF Viewer component component as an example. Install it with:

{% tabs %} {% highlight bash tabtitle="NPM" %}

npm install @syncfusion/ej2-react-pdfviewer --save

{% endhighlight %} {% highlight bash tabtitle="YARN" %}

yarn add @syncfusion/ej2-react-pdfviewer

{% endhighlight %} {% endtabs %}

Import Syncfusion® CSS styles

Syncfusion® React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application.

Where to add the imports:

  • App Router: put these in src/app/globals.css
  • Pages Router: put them in pages/_app.js or its imported global CSS

{% tabs %} {% highlight css tabtitle="globals.css" %}

/* PDF Viewer theme and base styles */ @import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";

{% endhighlight %} {% endtabs %}

N> To learn more about built-in themes and CSS references for individual components, see the themes documentation.

Add the Syncfusion® React component

Follow these steps to add the React PDF Viewer component to the Next.js project:

  • Define the PDF Viewer component in src/app/page.tsx, as shown below:

{% tabs %} {% highlight ts tabtitle="page.tsx" %} {% raw %}

'use client' import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer'; export function App() { return (

<PdfViewerComponent id="container" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" style={{ 'height': '640px' }}> {/* Inject the required services */} <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />

); } export default App;

{% endraw %} {% endhighlight %} {% endtabs %}

Run the application

To run the application, use the following command:

{% tabs %} {% highlight bash tabtitle="NPM" %}

npm run dev

{% endhighlight %} {% highlight bash tabtitle="YARN" %}

yarn run dev

{% endhighlight %} {% endtabs %}

To learn more about the PDF Viewer component, see the documentation.

N> View the Next.js PDF Viewer sample in the GitHub repository

See also