Trouble with Dynamic Routing and CSS Delay

[sambhav2612]

Hi,

We recently upgraded our code from Next 7.0.2 to 9.3.5 and we are facing some trouble in regard to those mentioned in the title of this post.

1. Dynamic Routing

We currently use next-routes to handle routing across the app. Given, the last time it was updated was 2 years back, it still works fine but causes the app to reload in production and development when navigating to a dynamic route from either static or dynamic route.

Since, it is not being maintained at all and still uses Next 6.0.0, it'd move in favor of using next/link instead of this from now on, however, to do that I saw from #10736 that for dynamic routing to work those dynamic parameters have to be placed in the child tree of the parent component. For example, our current routing file looks like this:

const routes = require("next-routes");
const routeList = routes()
    .add('category', '/category/:id', 'category')
    .add('house-detail', '/house-detail/:id', 'house-detail')
    .add('directory-detail', '/directory/:category', 'directory-detail')
    .add('story', '/story/:id', 'story')
    .add('directory-listing-detail', '/directory/:category/:id', 'directory-listing-detail')
    .add('saved-houses-detail', '/saved-houses/:category', 'saved-houses-detail');

module.exports = routeList;

So, to work with next-link from now on, I'd have to place a new id component under the category component, is that it, am I following the documentation right?

2. CSS Delay

Coming to another issue I mentioned, we are facing some serious CSS delay in our app, for instance, I'll attach a screencast of the issue:

This is in production build and what I observed is that it doesn't necessarily load the CSS per se, whilst so it just shows the barebones of the page and once you hover over some element (as you see, I hovered over the logo image where it should be rightly placed), it all just comes back to life.

A point to note here might be that we also use a webpack loader to load all SASS variables from a variable.scss file sitting at the base of the tree. Here's what our next.config.js looks like:

require('dotenv').config();
const webpack = require('webpack');
const jquery = require('jquery');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withTM = require('next-transpile-modules');

module.exports = withCSS(withSass(withTM({
    transpileModules: ['react-loader-spinner'],
    webpack: (config) => {
        config.plugins.push(
            new webpack.EnvironmentPlugin(process.env)
        );
        config.plugins.push(
            new webpack.ProvidePlugin({
                '$': jquery,
                'jQuery': jquery,
            })
        );
        config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    name: '[name].[ext]'
                }
            }
        });
        config.module.rules.push({
            enforce: 'pre',
            test: /.scss$/,
            loader: 'sass-resources-loader',
            options: {
                resources: './variable.scss',
            }
        });
        return config;
    }
})));

It'd be a great help if the team or community can assist with any of the problems I mentioned here.

Thanks!

[timneutkens]

You'll want to use built-in CSS support which ensures css is loaded before navigating: https://nextjs.org/docs/basic-features/built-in-css-support

[sambhav2612]

What about the first one?