1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-loading/pages/_app.js

45 lines
1.2 KiB
JavaScript
Raw Normal View History

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.events.on('routeChangeStart', (url) => {
console.log(`Loading: ${url}`)
NProgress.start()
})
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => 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>
)
}
}