I finally found a solution to this problem. I changed my code according to this issue that suggests using of layout-components:https://github.com/zeit/next.js/issues/4166

class About extends React.Component {  render() {    return (      <div id="main">        <li><Link href="/about/company">About company</Link></li>        <li><Link href="/about/me">About me</Link></li>        {this.props.child}      </div>    )  }}export default About

Then what I am going to show as a child should be like this:

const me = () => (  <About>    <div>     About me    </div>         </About>  )

This prevents page reloading. However, it still rerenders the entire page.

next-routes

there is a very good library for this specific situations that lets you define routes just like well-known express.js routes.

use it.

example from docs:

const routes = require('next-routes')                                                    // Name   Page      Patternmodule.exports = routes()                           // ----   ----      -----.add('about')                                       // about  about     /about.add('blog', '/blog/:slug')                         // blog   blog      /blog/:slug.add('user', '/user/:id', 'profile')                // user   profile   /user/:id.add('/:noname/:lang(en|es)/:wow+', 'complex')      // (none) complex   /:noname/:lang(en|es)/:wow+.add({name: 'beta', pattern: '/v3', page: 'v3'})    // beta   v3        /v3