Rendering Non-React Component (HTML/JSON page)

[Harrisonkamau]

Hey guys,

I'm creating a Salesforce Custom UI and the conventions for this as indicated in their official docs is to have rootUrl/index.html & rootUrl/config.json. Next.js seems to be interpreting this as a not found page and handles it that way. Is there a way to bypass this?

[srikanth912]

If index.html and config.json are static, you can put those files in the public directory (https://nextjs.org/docs/basic-features/static-file-serving) and they will be served as /index.html and /config.json

If you need them to be dynamic, then you can create pages/index.html.js and pages/config.json.js and return the response from there.

You can set the content type to be JSON in getInitialProps (or getServerSideProps) as shown below.

static async getInitialProps() {
    res.setHeader('Content-Type', 'application/json; charset=utf-8');
    res.write("{foo: 'bar' }");
    res.end();
    return {}; // it never reaches here but required as getInitialProps need to return object.
  }

We use the above implementation for dynamic sitemaps.

[senavinicius]

where do I write this 'static async getInitialProps' function?

[kingerking]

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

[senavinicius]

Thanks

[msafi]

Based on my tests, the response here doesn't get cached. The code gets fully executed with every request. A solution that includes caching without the use of external libraries would be ideal.

[Noitidart]

Thanks for this trick. Is there anyway to do this get getStaticProps? Or middleware?

[Harrisonkamau]

Thank you @srikanth912 for your help!

Fortunately, I found this little tweak to work excellently:
Steps:

• Add a .js at the end of the pages/config.json file.
• Still use a React component but send it as either a string or an array.

This is a working example

// pages/config.json.js

const sampleConfigData = [{"id":1,"first_name":"Petronia","last_name":"DelaField","email":"pdelafield0@state.gov","gender":"Female","ip_address":"200.86.172.105"},
{"id":2,"first_name":"Kendall","last_name":"Shilladay","email":"kshilladay1@who.int","gender":"Male","ip_address":"53.26.234.195"},
{"id":3,"first_name":"Shelia","last_name":"Jenoure","email":"sjenoure2@acquirethisname.com","gender":"Female","ip_address":"105.195.252.114"},
{"id":4,"first_name":"Cherida","last_name":"Cronkshaw","email":"ccronkshaw3@telegraph.co.uk","gender":"Female","ip_address":"59.49.88.149"},
{"id":5,"first_name":"Bibby","last_name":"Betham","email":"bbetham4@sitemeter.com","gender":"Female","ip_address":"38.115.1.6"}];

export default function configPage() {
  return JSON.stringify(sampleConfigData);
}

The above script can now be accessed, with the right data, at endpointUrl/config.json :)

[srikanth912]

@Harrisonkamau it will render JSON as HTML I believe with the above method (If you view the source of the endpointUrl/config.json, you will see HTML tags and if other applications are consuming this, they won't be able to parse with standard JSON parser).

Not sure if that's what you want though.

[Harrisonkamau]

Thank you for the follow-up comment. @srikanth912 🙇

You're right - I need the page in JSON format. I'll try out your earlier recommendation

[illuminist]

I've never done this before, but how about using pages/api directory?

[Harrisonkamau]

Tell me more @illuminist . Does namespace the page /api automatically accept type JSON?

[Harrisonkamau]

@illuminist Is it possible to have the index.html & config.json required by Salesforce inside the pages/api namespace. For reference, kindly check this Salesforce requirements page. I'd like to eventually be able to create a route like:
/integrations/:integration_id/salesforce/v1/:jwt_key_from_salesforce/activities/index.html and /integrations/:integrations_id/salesforce/v1/:jwt_key_from_salesforce/activities/config.json

[illuminist]

It can handle everything like you would do in express.js: getting http request data and writing into response object. And it also can handle dynamic route nicely, albeit that you have to parse the url to get the query yourself.

For more information: https://nextjs.org/docs/api-routes/introduction

[Harrisonkamau]

Update:
I created an API endpoint and used rewrites to render the config.jsonpage. The API endpoint is api/:integrationKey/config.json => pages/api/[integrationKey]/config.json.js

// next.config.js
module.exports = {
 async rewrites() {
  return [
    {
        source: '/:integrationKey/activities/config.json',
        destination: '/api/:integrationKey/activities/config.json',
      },
  ];
 }
};

Cc @illuminist @srikanth912