Rerendering little bitch

components-shrink.js

export default class extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        console.log('They... mounted me. :( ');
    }

    render (){
        return (
            <div>
                <style global jsx>{`
                    .noUp {
                        animation-duration: 1s;
                        animation-name: slidein;
                    }
        
                    @keyframes slidein {
                        from {
                            font-size:30px;
                        }
        
                        to {
                            font-size:14px;
                        }
                    }
                `}</style>
                <div className="noUp">Should not re-render in <b>second</b> and <b>third</b> page</div>
            </div>
        );
    }
}

package.json

{
  "name": "Rerendering little bitch",
  "version": "1.0.0",
  "description": "Next is what",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^3.2.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

pages-index.js

import React from 'react';
import Link from 'next/link'
import Shrink from './../components/shrink';
export default class extends React.Component {
    constructor(){
        super();
        this.state = {'localVar': ''};        
    }

    render (){
        var {localVar} = this.state;

        return (
            <div>
                <Shrink/>
                <h4>
                    <Link href="/second" prefetch>
                        <a>Second</a>
                    </Link>
                    <br/>
                    <Link href="/third" prefetch>
                        <a>Third</a>
                    </Link>
                </h4>

                <button onClick={ () => {
                    this.setState({'localVar': `${localVar}1`  })
                }}>Force re-render</button>
                <span>{localVar}</span>

            </div>
        );
    }
}

pages-second.js

import Shrink from './../components/shrink';
import Link from 'next/link'
export default () => (
    <div>
        <Shrink/>
        <h4>
            <Link href="/" prefetch>
                <a>Back</a>
            </Link>
        </h4>
    </div>
);

pages-third.js

import Link from 'next/link';
import Shrink from './../components/shrink';
export default () => (
    <div>
        <Shrink/>
        <h4>
            <Link href="/" prefetch>
                <a>Back</a>
            </Link>
        </h4>
    </div>
);