terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

add next/error (#1040)

Browse source
This commit is contained in:
Naoyuki Kanezawa 2017-02-09 04:59:33 +09:00 committed by Guillermo Rauch
parent a9428b88e3
commit 9348762f4a
7 changed files with 80 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
error.js Normal file
View file

@ -0,0 +1 @@
module.exports = require('./dist/lib/error')

4
examples/with-flow/types/next.js.flow
View file

@ -20,6 +20,10 @@ declare module "next/link" {
declare module.exports: Class<React$Component<void, {href: string}, any>>;
}
declare module "next/error" {
declare module.exports: Class<React$Component<void, {statusCode: number}, any>>;
}
declare module "next/prefetch" {
declare export var prefetch: (url: string) => any;
declare export var reloadIfPrefetched: any;

69
lib/error.js Normal file
View file

@ -0,0 +1,69 @@
import React from 'react'
import Head from './head'
export default class Error extends React.Component {
static getInitialProps ({ res, xhr }) {
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
return { statusCode }
}
render () {
const { statusCode } = this.props
const title = statusCode === 404
? 'This page could not be found'
: (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
return <div style={styles.error}>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</Head>
<div>
<style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
{statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
<div style={styles.desc}>
<h2 style={styles.h2}>{title}.</h2>
</div>
</div>
</div>
}
}
const styles = {
error: {
color: '#000',
background: '#fff',
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
height: '100vh',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
desc: {
display: 'inline-block',
textAlign: 'left',
lineHeight: '49px',
height: '49px',
verticalAlign: 'middle'
},
h1: {
display: 'inline-block',
borderRight: '1px solid rgba(0, 0, 0,.3)',
margin: 0,
marginRight: '20px',
padding: '10px 23px 10px 0',
fontSize: '24px',
fontWeight: 500,
verticalAlign: 'top'
},
h2: {
fontSize: '14px',
fontWeight: 'normal',
margin: 0,
padding: 0
}
}

3
package.json
View file

@ -16,7 +16,8 @@
"head.js",
"document.js",
"prefetch.js",
"router.js"
"router.js",
"error.js"
],
"bin": {
"next": "./dist/bin/next"

71
pages/_error.js
View file

@ -1,70 +1 @@
import React from 'react'
import Head from 'next/head'
export default class Error extends React.Component {
static getInitialProps ({ res, xhr }) {
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
return { statusCode }
}
render () {
const { statusCode } = this.props
const title = statusCode === 404
? 'This page could not be found'
: (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
return <div className='error'>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</Head>
<div>
{statusCode ? <h1>{statusCode}</h1> : null}
<div className='desc'>
<h2>{title}.</h2>
</div>
</div>
<style jsx global>{`
body { margin: 0 }
`}</style>
<style jsx>{`
.error {
color: #000;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
height: 100vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.desc {
display: inline-block;
text-align: left;
line-height: 49px;
height: 49px;
vertical-align: middle;
}
h1 {
display: inline-block;
border-right: 1px solid rgba(0, 0, 0,.3);
margin: 0;
margin-right: 20px;
padding: 10px 23px 10px 0;
font-size: 24px;
font-weight: 500;
vertical-align: top;
}
h2 {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
}
`}</style>
</div>
}
}
module.exports = require('next/error')

3
server/build/babel/preset.js
View file

@ -24,7 +24,8 @@ module.exports = {
'next/css': require.resolve('../../../lib/css'),
'next/head': require.resolve('../../../lib/head'),
'next/document': require.resolve('../../../server/document'),
'next/router': require.resolve('../../../lib/router')
'next/router': require.resolve('../../../lib/router'),
'next/error': require.resolve('../../../lib/error')
}
}
]

1
server/build/webpack.js
View file

@ -179,6 +179,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false
'next/head': require.resolve('../../lib/head'),
'next/document': require.resolve('../../server/document'),
'next/router': require.resolve('../../lib/router'),
'next/error': require.resolve('../../lib/error'),
'styled-jsx/style': require.resolve('styled-jsx/style')
}
}