mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
update with-flow example (#4835)
Changes: * updated packages * moved the content of `layout` to `_app.js` and created simple `Page` component * replaced `import * as React` because it is not necessary to import everything * moved `next.js.flow` to `flow-typed` as it is default directory for library definitions * updated the gif
This commit is contained in:
parent
d1fbcfe5de
commit
c090a57e77
|
@ -4,6 +4,5 @@
|
||||||
[include]
|
[include]
|
||||||
|
|
||||||
[libs]
|
[libs]
|
||||||
types/
|
|
||||||
|
|
||||||
[options]
|
[options]
|
||||||
|
|
17
examples/with-flow/components/Page.js
Normal file
17
examples/with-flow/components/Page.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
// @flow
|
||||||
|
import React, { type Node } from 'react'
|
||||||
|
import Head from 'next/head'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: Node,
|
||||||
|
title?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ({ children, title = 'This is the default title' }: Props) => (
|
||||||
|
<section>
|
||||||
|
<Head>
|
||||||
|
<title>{title}</title>
|
||||||
|
</Head>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
)
|
|
@ -1,31 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import * as React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import Head from 'next/head'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
children?: React.Node,
|
|
||||||
title?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ({children, title = 'This is the default title'}: Props) => (
|
|
||||||
<div>
|
|
||||||
<Head>
|
|
||||||
<title>{title}</title>
|
|
||||||
<meta charSet='utf-8' />
|
|
||||||
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
|
|
||||||
</Head>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<Link href='/'><a>Home</a></Link>|
|
|
||||||
<Link href='/about'><a>About</a></Link>|
|
|
||||||
<Link href='/contact'><a>Contact</a></Link>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
{children}
|
|
||||||
<footer>
|
|
||||||
I`m here to stay
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
)
|
|
|
@ -1,4 +1,4 @@
|
||||||
/* @flow */
|
// @flow
|
||||||
|
|
||||||
declare module "next" {
|
declare module "next" {
|
||||||
declare type NextApp = {
|
declare type NextApp = {
|
|
@ -15,8 +15,8 @@
|
||||||
"react-dom": "^16.0.0"
|
"react-dom": "^16.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-eslint": "8.2.1",
|
"babel-eslint": "8.2.6",
|
||||||
"babel-plugin-transform-flow-strip-types": "6.22.0",
|
"babel-plugin-transform-flow-strip-types": "6.22.0",
|
||||||
"flow-bin": "0.64.0"
|
"flow-bin": "0.77.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
36
examples/with-flow/pages/_app.js
Normal file
36
examples/with-flow/pages/_app.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import App, {Container} from 'next/app'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
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>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<Link href='/'><a>Home</a></Link>|
|
||||||
|
<Link href='/about'><a>About</a></Link>|
|
||||||
|
<Link href='/contact'><a>Contact</a></Link>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<Component {...pageProps} />
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
I`m here to stay
|
||||||
|
</footer>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as React from 'react'
|
import React from 'react'
|
||||||
import Layout from '../components/layout'
|
import Page from '../components/Page'
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<Layout title='About us'>
|
<Page title='About us'>
|
||||||
<div>About us</div>
|
<div>About us</div>
|
||||||
</Layout>
|
</Page>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as React from 'react'
|
import React from 'react'
|
||||||
import Layout from '../components/layout'
|
import Page from '../components/Page'
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<Layout title='Contact us'>
|
<Page title='Contact us'>
|
||||||
<div>Contact</div>
|
<div>Contact</div>
|
||||||
</Layout>
|
</Page>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as React from 'react'
|
import React from 'react'
|
||||||
import Layout from '../components/layout'
|
import Page from '../components/Page'
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<Layout>
|
<Page>
|
||||||
<div>Hello World.</div>
|
<div>Hello World</div>
|
||||||
</Layout>
|
</Page>
|
||||||
)
|
)
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 264 KiB After Width: | Height: | Size: 989 KiB |
Loading…
Reference in a new issue