How to use MongoDB Stitch in Next.js

Question

I have planned to use mongoDB Stitch. But it provides browser SDK and server SDK differently. I tried both of them and i am getting some error. I believe this is because my app is isomorphic as i am using Next.js. Please guide me what can i do in such situation.

I got error like self is not defined while using mongodb-stitch-browser-sdk

And some issue as Module not found: Can't resolve 'fs' while using mongodb-stitch-server-sdk.

Please help. I have also seen similar question without any answer on this site which is here

Answer 1

Yeah that happens because nextjs build up the isomorphic app. So try to create webhook and either trigger mongodb stitch api, either directly use service from the webhook. This is the example of the use registration via stitch webhook:

exports = function(payload) {
    const request = EJSON.parse(payload.body.text());
    const http = context.services.get("<app-title>");
    const owner = context.values.get("<username-of-the-app-owner>");
    const apiKey = context.values.get("<api-key>");

    return http.post({
        url: "https://stitch.mongodb.com/api/admin/v3.0/auth/providers/mongodb-cloud/login",
        body: JSON.stringify({
            username: owner,
            apiKey: apiKey
        })
    }).then(response => EJSON.parse(response.body.text()).access_token).then(accessToken => {
        return http.post({
            url: "https://stitch.mongodb.com/api/admin/v3.0/groups/<group-id>/apps/<app-id>/users",
            headers: {
                Authorization: ["Bearer " + accessToken]
            },
            body: JSON.stringify({
                email: request.useremail,
                password: request.userpass
            })
        });
    });
};

This is the one that uses aws s3 service:

exports = function(payload) {
    //base64EncodedImage, bucket, fileName, fileType
    const body = EJSON.parse(payload.body.text());
    // Convert the base64 encoded image string to a BSON Binary object
    const binaryImageData = BSON.Binary.fromBase64(body.picture, 0);
    // Instantiate an S3 service client
    const s3Service = context.services.get('<aws-s3-service-title>').s3('<location>');
    // Put the object to S3
    return s3Service.PutObject({
        'Bucket': '<aws-bucket-title>',
        'Key': body.fileName,
        'ContentType': body.fileType,
        'Body': binaryImageData
    })
        .then(putObjectOutput => {
            // console.log(putObjectOutput);
            // putObjectOutput: {
            //   ETag: <string>, // The object's S3 entity tag
            // }
            return putObjectOutput;
        })
        .catch(console.error);
    // return body;
};