e8c1eaec83
Changes: * Split `Header` component trough `_document.js` and `_app.js` * Attached Router events with a way described in the [documentation](https://github.com/zeit/next.js#router-events) (though in the documentation is says it should be `Router.events.on` while I managed to get it working only by `Router.router.events.on` and I had to place it inside `componentDidMount`)
44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import App, {Container} from 'next/app'
|
|
import Link from 'next/link'
|
|
import NProgress from 'nprogress'
|
|
import Router from 'next/router'
|
|
|
|
const linkStyle = {
|
|
margin: '0 10px 0 0'
|
|
}
|
|
|
|
Router.onRouteChangeStart = (url) => {
|
|
console.log(`Loading: ${url}`)
|
|
NProgress.start()
|
|
}
|
|
Router.onRouteChangeComplete = () => NProgress.done()
|
|
Router.onRouteChangeError = () => NProgress.done()
|
|
|
|
export default class MyApp extends App {
|
|
static async getInitialProps ({ Component, router, ctx }) {
|
|
let pageProps = {}
|
|
|
|
if (Component.getInitialProps) {
|
|
pageProps = await Component.getInitialProps(ctx)
|
|
}
|
|
|
|
return {pageProps}
|
|
}
|
|
|
|
render () {
|
|
const {Component, pageProps} = this.props
|
|
return (
|
|
<Container>
|
|
<div style={{ marginBottom: 20 }}>
|
|
<Link href='/'><a style={linkStyle}>Home</a></Link>
|
|
<Link href='/about'><a style={linkStyle}>About</a></Link>
|
|
<Link href='/forever'><a style={linkStyle}>Forever</a></Link>
|
|
<Link href='/non-existing'><a style={linkStyle}>Non Existing Page</a></Link>
|
|
</div>
|
|
|
|
<Component {...pageProps} />
|
|
</Container>
|
|
)
|
|
}
|
|
}
|