This project demonstrates how to integrate Intercom chat widget into a Next.js 14 application. It provides a robust setup to add Intercom to your Next.js projects using modern best practices for script loading and initialization.
Before you begin, ensure you have the following installed on your system:
- Node.js (LTS version recommended, e.g., 14.x or 16.x)
- npm or Yarn
- Git
Additionally, you will need an Intercom account and your Intercom app ID to complete the integration.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
-
Clone the repository:
git clone https://github.com/tantainnovative/intercom-next-js-14-guide.git cd intercom-nextjs-14
-
Install the dependencies:
npm install
or if you use Yarn:
yarn install
-
Set up the environment variables:
Create a
.env.local
file in the root directory of the project, and add the following line:NEXT_PUBLIC_INTERCOM_APP_ID=your_intercom_app_id_here
Replace
your_intercom_app_id_here
with your actual Intercom app ID.
To run the application locally:
npm run dev
or if you use Yarn:
yarn dev
This will start the development server on http://localhost:3000. Open this URL in your browser to view the application.
components/
: Contains all React components includingIntercomClientComponent
.pages/
: Contains the Next.js pages.public/
: Static files like images and fonts.styles/
: CSS files for global styles.types/global.d.ts
: TypeScript declarations for extending the global namespace.
Contributions are welcome! For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Project Description: Begin with a brief introduction about what the repository is for.
- Prerequisites: List what the user needs before starting.
- Getting Started: Detailed steps to clone, setup, and run the project.
- Project Structure: A brief overview of how the project is organized.
- Contributing: Encourage contributions by specifying how others can contribute.
- License: Mention the type of license under which the project is released.