NextJS: Specify Common Rendering Template - reactjs

Question

Below is an example of a link structure that I am trying to work with:
www.baseurl.com/pathname/some-sub-information
I essentially want NextJS to render the file matching the /pathname/ - so pathname.js. No matter what /some-sub-information might be, NextJS should render the pathname.js file, using the /some-sub-information as parameters for an API call.
I know this could essentially be done by passing queries through the link, and have it hook the the pathname, although I have been instructed by marketing that this is how they want the links.
I am at a bit of a loss how to do this, as this is the first time I am working with Next and SSR in general. I am hoping that there is someway in Next to specify that it should render a certain file when it hits the /pathname part of the url, and then just ignore the rest of the url.
This might be too much to ask, bug if there is any other way that I could achieve this, guiding information would be highly appreciated.

Answer 1

The solution I can think of is to add a custom server where you parse path like /pathname/some-sub-information and converts it into page to render pathname and some additional param some-sub-information
server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true);
const { pathname, query } = parsedUrl; // pathname = '/pathname/some-sub-information'
const parts = pathname.split('/');
const page = parts[1]; // 'pathname'
const param = parts[2]; // 'some-sub-information'
if (page) {
const queryParams = { ...query, pageParam: param };
app.render(req, res, '/' + page, queryParams);
} else {
handle(req, res, parsedUrl);
}
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
Params that are passed from server to client app.render(req, res, '/' + page, { pageParam: 'test' }); can be accessed inside getInitialProps query param e.g. query.pageParam
So the page will look something like this
pages/index.js
function Index({ pageParam }) {
return (
<div>
INDEX component with {pageParam}
</div>
);
}
Index.getInitialProps = async ({ query }) => {
const { pageParam } = query;
return { pageParam };
};
export default Index;
Having this custom server and pages/index.js (node server.js), go to /index/some-data-here will result into the following page
Hope this helps you!