Questions about Parameterized routing in conjunction with SSR

[afterburn]

I'm using the express version of next.js which I'm using in conjunction with redux.
I've tried several approaches but I'm unclear as to what the best practice in regard to how my router should function is. What I'm trying to accomplish is being able to have my users navigate to /profile/:username and serve a SSR rendered document so it gets picked up by search engine crawlers for SEO purposes.

Ideally I'd like for my application to be able handle route /:username and still have route /about display pages/about.js instead of looking for a user called about, just like facebook does but that's not what this question is about.

This is what my router currently looks like:

const { parse } = require('url');
const pathMatch = require('path-match');
const route = pathMatch();

// Parameterized routes.
const profileRoute = route('/profile/:username');
const newsRoute = route('/news/:article');

((exports) => {
	
	platform.server.get('*', (req, res) => {
		const parsedUrl = parse(req.url, true);
		const { pathname, query } = parsedUrl;
    	
    		// Get parameter(s) if available.
    		let profileParams = profileRoute(pathname);
    		let newsParams = newsRoute(pathname);

    		// Route matching.
		if(pathname.indexOf('/profile/') !== -1) platform.app.render(req, res, '/profile', profileParams);
		else if(pathname === '/news/:article') platform.app.render(req, res, '/news', newsParams);
		else if(pathname === '/about') platform.app.render(req, res, '/about');
		else platform.handle(req, res);		
	});

	console.log("> Routing initialized");

})(module);

I'm guessing that since I'm sending the parameters for let's say user John to be picked up by a component and then have redux fetch the user's data from the back-end is not truly SSR. I also find it inconvenient how I'm currently defining parameterized routes and having to create a variable for each route's parameters. Obviously I don't like having to use indexOf on pathname to detect someone's requesting a profile. Hopefully someone can point out what I could possibly do different.

[arunoda]

I suggest you use express to define routes.

If you wanna handle /:username routes. Do this:

This is the code you can use:
(This is a sample code. Not tested)

// Handle core Next.js routes
['static', '_next', '_webpack', '__webpack_hmr']
  .forEach(function(path) {
    app.get(path, function (req, res) => {
      handle(req, res)
    })
  })

app.get('/about', ...)
app.get('/:user', ...)

[afterburn]

Thanks for your reply, I've tried to implement your code and assumed this is what you mean by using express to define routes:

['static', '_next', '_webpack', '__webpack_hmr']
.forEach(function(path) {
	platform.server.get(path, (req, res) => {
		handle(req, res);
	});
});

platform.server.get('/', (req, res) => {
	platform.app.render(req, res, '/');
});

platform.server.get('/about', (req, res) => {
	platform.app.render(req, res, '/about');
});

where platform.server is my express app, and platform.app is my next js instance which might've been poorly chosen names.

This approach however causes the following errors to occur when navigating to http://localhost:3000

[fridays]

It should work if you add wildcards to the paths:

['static*', '_next*', '_webpack*', '__webpack_hmr*']

You could also use next-routes where it's done similarly.

[arunoda]

@fridays thanks for the updated example.