The VisualDx API provides the data and tools needed to create applications for both health care providers and patients. This Next.js sample application is a reverse proxy for accessing the VisualDx API's extensive library of curated medical images. It features:

✅ Automatic Token Management: Fetches and refreshes tokens automatically.
✅ Configurable Settings: Supports different audiences (consumer, clinical).
✅ Customizable Cache TTL: Cache duration is now adjustable via config.js.
✅ SEO-Friendly URLs: Supports /images/:size/:imageId/:filename.
✅ Error Handling: 302 redirects are handled invisibly, and 4xx errors bubble up and are returned.

The project includes the following dependencies:

• Next.js (15.1.6) - Used as the framework for API handling and server-side logic.
• React (^19.0.0) & React-DOM (^19.0.0) - Required for Next.js applications.
• Axios (^1.7.9) - Handles API requests and authentication.
• Node-Cache (^5.1.2) - Implements in-memory caching for images.

• ESLint (^9) - Ensures code quality.
• ESLint Config for Next.js (15.1.6) - Standard ESLint rules for Next.js.
• @eslint/eslintrc (^3) - ESLint configuration management.

• This project requires at least Next.js v15.1.6 to ensure compatibility.
• Older versions of Next.js (below v15) may not support some features used in this implementation.

1. Node.js: Install Node.js (v15 or later).
2. VisualDx API Access: Obtain an API token and access credentials.

git clone https://github.com/VisualDx/visualdx-api-image-proxy.git
cd visualdx-api-image-proxy

npm install

Create a .env.local file in the root directory and set up API credentials:

# VisualDx API Base URL
API_BASE_URL=https://api.visualdx.com/v1/libraries/images

# Token Endpoint for authentication
TOKEN_URL=https://api.visualdx.com/v1/auth/token

# Authentication Credentials
CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret

# Audience
AUDIENCE=consumer # Options: consumer, clinical

# Cache TTL (in seconds) - Default 72 hours (72 * 3600 = 259200 seconds)
CACHE_TTL=259200

Note: If your CLIENT_SECRET contains special characters, wrap it in double quotes:

CLIENT_SECRET="P@ssw0rd!"

Start the server with:

npm run dev

The server will start at:

http://localhost:3000

Path: /api/images/:size?/:imageId/:filename?

• size (optional): The size of the image. Allowed values are thumbnail, standard, and full. Defaults to standard.
• imageId (required): The unique ID of the image.
• filename (optional): SEO-friendly filename for the image.

1. With Size and Filename:

   curl -X GET "http://localhost:3000/api/images/thumbnail/12345/sample-image.jpg" 

2. Without Size:

   curl -X GET "http://localhost:3000/api/images/12345/sample-image.jpg" 

3. Without Filename:

   curl -X GET "http://localhost:3000/api/images/12345" 

1. Valid Image Request:

   • Request an image ID that exists in the VisualDx API.
   • Ensure the image is returned and cached for subsequent requests.

2. Invalid Image ID:

   • Use an invalid image ID.
   • Confirm that the API responds with 404 Not Found.

3. Redirect Handling:

   • Test with an image ID that triggers a 302 redirect.
   • Confirm that the final image is fetched correctly.

4. Cache Validation:

   • Request the same image multiple times.
   • Verify that subsequent requests are served from the cache.

To build the application for production, run:

npm run build

After building the application, start the production server with:

npm start

1. SEO-Friendly URLs:

   • The application allows filenames in the URL for SEO purposes, but the filename is optional.

2. Caching:

   • Images are cached for 72 hours to reduce redundant API calls.

• Error: 500 Too Many Redirects
• Solution: Verify the API endpoint and ensure the redirect chain is valid.

• Next.js Documentation
• VisualDx API Documentation