Integrating Next.js with DHIS2 Using the DHIS2 App Runtime
Introduction
DHIS2 is an open-source software platform for reporting, analysis, and dissemination of data across health programs. Developed by the Health Information Systems Program, it is widely used in multiple countries for health management information systems. DHIS2 offers various services, including data visualization, GIS mapping, predictive analytics, and more.
Next.js, a powerful open-source framework built on top of React.js, enables server-side rendering and static web application generation. It is known for its performance, scalability, and SEO-friendly features, making it popular for both small projects and large-scale applications.
DHIS2 supports custom applications, allowing developers to extend its functionality through the DHIS2 API. This provides flexibility to build applications that enhance DHIS2’s capabilities beyond the out-of-the-box offerings. These custom applications can be integrated into the DHIS2 interface, providing a seamless user experience. However, if you need to use DHIS2 data externally (e.g., on a public portal), you can access the data through the API, though this limits the use of powerful tools maintained by the DHIS2 core team, such as App Runtime and UI components.
This article explains how to set up a Next.js application that accesses DHIS2 APIs using the DHIS2 App Runtime.
You can initialize a Next.js project by running the following command:
npx create-next-app@latest
Follow the prompts to create your project based on your preferences. Once the setup is complete, navigate to your project’s directory:
cd <project-name>
Replace project-name with the name you chose during the Next.js setup.
For this setup, we'll use two DHIS2 packages. Install them by running:
npm install @dhis2/ui @dhis2/app-runtime --legacy-peer-deps
If you’re using a different package manager (like Yarn or pnpm), install the packages accordingly.