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

added example with flow (#814)

* added  example with flow

* Fixed linting errors
This commit is contained in:
jagreehal 2017-01-19 09:48:55 +00:00 committed by Guillermo Rauch
parent 43149bdb08
commit 1e77568657
9 changed files with 122 additions and 0 deletions

View file

@ -0,0 +1,8 @@
{
"presets": [
"next/babel"
],
"plugins": [
"transform-flow-strip-types"
]
}

View file

@ -0,0 +1,7 @@
[ignore]
[include]
[libs]
[options]

View file

@ -0,0 +1,29 @@
# Example app with [Flow](https://flowtype.org/)
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-components
cd with-flow
```
Install it and run:
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## The idea behind the example
This example shows how you can use Flow, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
![with-flow](with-flow.gif)

View file

@ -0,0 +1,31 @@
// @flow
import type {Element} from 'React'
import Link from 'next/link'
import Head from 'next/head'
type Props = {
children?: Element<any>,
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>
)

View file

@ -0,0 +1,20 @@
{
"name": "with-flow",
"version": "1.0.0",
"license": "MIT",
"author": "Jag Reehal",
"scripts": {
"dev": "next",
"build": "next build",
"flow": "flow; test $? -eq 0 -o $? -eq 2",
"start": "next start"
},
"dependencies": {
"next": "^2.0.0-beta"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-plugin-transform-flow-strip-types": "^6.21.0",
"flow-bin": "^0.37.4"
}
}

View file

@ -0,0 +1,9 @@
// @flow
import Layout from '../components/layout'
export default () => (
<Layout title='About us'>
<div>About us</div>
</Layout>
)

View file

@ -0,0 +1,9 @@
// @flow
import Layout from '../components/layout'
export default () => (
<Layout title='Contact us'>
<div>Contact</div>
</Layout>
)

View file

@ -0,0 +1,9 @@
// @flow
import Layout from '../components/layout'
export default () => (
<Layout>
<div>Hello World.</div>
</Layout>
)

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB