OnlyOffice Docs: The DocumentEditor is not saving changes in Next.js

I have configured the Docs editor in my Django project as the backend and it returns the config object to my Nextjs 14 app.

When I try to load the Docs editor, it loads fine but the saving functionality is not working. I can edit the pdf and it tells me that it saves my changes, but when I reload the page, all changes are lost.

The editor is working fine and saves correctly when I try to add it in a simple HTML index file providing the config as a static object in a script.

This is what the backend returns (I replaced the tokens and keys with placeholders)

{
        "document": {
            "fileType": "pdf",
            "key": "xxxxx",
            "title": "Invoice #5046",
            "url": "https://xxxxx",
            "permissions": {
                "edit": true,
                "download": true,
                "comment": true,
                "review": true,
                "chat": false,
                "protect": false
            }
        },
        "editorConfig": {
            "callbackUrl": "https://xxxxx/",
            "mode": "edit",
            "user": {
                "id": "xxxxx",
                "name": "Mustafa Alhasanat"
            }
        },
        "height": "100%",
        "width": "100%",
        "token": "xxxxx"
    },

This is the frontend code

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React from "react";
import { OnlyOfficeConfig } from "only-office";
import { DocumentEditor } from "@onlyoffice/document-editor-react";

function onDocumentReady(event: any) {
    console.log("Document is loaded");
}

function onLoadComponentError(errorCode: any, errorDescription: any) {
    switch (errorCode) {
        case -1: // Unknown error loading component
            console.log(errorDescription);
            break;

        case -2: // Error load DocsAPI from http://documentserver/
            console.log(errorDescription);
            break;

        case -3: // DocsAPI is not defined
            console.log(errorDescription);
            break;
    }
}

export const OnlyOfficeComponent = React.memo(({ config }: { config: OnlyOfficeConfig }) => {
    return (
        <pre className="w-full h-full">
            <DocumentEditor
                id="docxEditor"
                documentServerUrl="https://MY_SERVER_URL/"  // I replaced this in my code
                config={config}
                events_onDocumentReady={onDocumentReady}
                onLoadComponentError={onLoadComponentError}
            />
        </pre>
    );
});

I tried both configuring the editor by the provided component and by a loaded script and both have the same issue

If you mean the “all changes saved” message at the bottom of the editors page, it indicates that the changes in the document have been successfully sent to the database, allowing a new version of the file to be created in the OO Docs cache.

To create a new version of the file in your storage, a callback handler must be implemented on your end. There are few Document Save Examples available here

"callbackUrl": "https://xxxxx/"

Please describe how you save the file.