Installing on NextJS websites
The Next.js-based website is a single-page web framework that enables you to create full-stack web applications by leveraging the latest React features. However, it doesn’t offer the standard index.html where you can easily copy and paste most of the <script> based installation codes, including the AskHandle install code. Therefore, some small customizations to the install code are necessary to fit the Next.js structure.
There are two places in a Next.js application where we can install the <script>...</script>. They are located in the _app.js and layout.js files.
The _app.js file is a top-level component that wraps around all of your pages, and any code placed inside this component will be executed on every page. To add scripts, we can also use the built-in Next.js component Script. Placing your Script components inside _app.js ensures that the scripts are loaded and executed across all application pages.
Layout.js is a custom component you create to maintain a consistent design across your pages (e.g., headers, footers, or sidebars).
In short, _app.js is a special component in Next.js that sets up your app’s pages, while Layout.js is a custom component you create to maintain design consistency across pages.
The Script component in Next.js provides a 'strategy' prop that you can use to define where the script should be loaded. There are three possible values for the 'strategy' prop:
- beforeInteractive: This will load the script before rendering the page. This strategy is not recommended for scripts that can be deferred, as it may slow down the page rendering. The script will be placed in the <head>.
- lazyOnload: This will load the script once the page has been rendered and the 'window.onload' event has been fired. This strategy is recommended for non-critical scripts that can be deferred. The script will be placed in the <body>.
- afterInteractive (default): This will load the script immediately after rendering the page. The script will be placed in the <body>.
For more information about the Next.js Script component, visit: Next.js Script Component Documentation
In this tutorial, we will demonstrate how to integrate AskHandle into the _app.js file.
Step 1: Find your _app.js file The _app.js file is typically located in the 'Pages' folder as one of the primary files.
Step 2: Open the _app.js file in a text editor.
Step 3: Add the following two lines at the top of the _app.js file to import the necessary Next.js system functions:
import { useEffect } from 'react';
import Script from 'next/script';
Step 4: Add the AskHandle install code Copy and paste the install code below into your _app.js file, ensuring that you replace the example token with your own token. Your token can be found in the default AskHandle install code available in the AskHandle dashboard under 'Installation.'
Step 5: Save the file and close the text editor Save all changes and close the text editor. You should now see AskHandle integrated into the right side of your website.
