mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Merge branch 'v3-beta' of github.com:zeit/next.js into v3-beta
This commit is contained in:
Guillermo Rauch
commit
f4345e79c2
|
|
@ -26,6 +26,6 @@ now
|
|||
|
||||
## The idea behind the example
|
||||
|
||||
This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor).
|
||||
This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor).
|
||||
|
||||
For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.
|
||||
|
|
|
|||
29
examples/with-material-ui-next/README.md
Normal file
29
examples/with-material-ui-next/README.md
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui-next)
|
||||
# Material-UI example
|
||||
|
||||
## 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-material-ui-next
|
||||
cd with-material-ui-next
|
||||
```
|
||||
|
||||
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 features how you use [material-ui](https://github.com/callemall/material-ui) (Material components that implement Google's Material Design) with Next.js.
|
||||
|
||||
52
examples/with-material-ui-next/components/App.js
Normal file
52
examples/with-material-ui-next/components/App.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
|
||||
import { getDefaultContext } from '../styles/createDefaultContext'
|
||||
|
||||
const styleSheet = createStyleSheet('App', theme => ({
|
||||
'@global': {
|
||||
html: {
|
||||
background: theme.palette.background.default,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
WebkitFontSmoothing: 'antialiased', // Antialiasing.
|
||||
MozOsxFontSmoothing: 'grayscale' // Antialiasing.
|
||||
},
|
||||
body: {
|
||||
margin: 0
|
||||
},
|
||||
a: {
|
||||
color: 'inherit'
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
let AppWrapper = props => props.children
|
||||
|
||||
AppWrapper = withStyles(styleSheet)(AppWrapper)
|
||||
|
||||
class App extends Component {
|
||||
componentDidMount () {
|
||||
// Remove the server-side injected CSS.
|
||||
const jssStyles = document.querySelector('#jss-server-side')
|
||||
if (jssStyles && jssStyles.parentNode) {
|
||||
jssStyles.parentNode.removeChild(jssStyles)
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { styleManager, theme } = getDefaultContext()
|
||||
return (
|
||||
<MuiThemeProvider styleManager={styleManager} theme={theme}>
|
||||
<AppWrapper>
|
||||
{this.props.children}
|
||||
</AppWrapper>
|
||||
</MuiThemeProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
App.propTypes = {
|
||||
children: PropTypes.node.isRequired
|
||||
}
|
||||
|
||||
export default App
|
||||
13
examples/with-material-ui-next/package.json
Normal file
13
examples/with-material-ui-next/package.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"material-ui": "next",
|
||||
"next": "latest",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
}
|
||||
}
|
||||
45
examples/with-material-ui-next/pages/_document.js
Normal file
45
examples/with-material-ui-next/pages/_document.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
import { getDefaultContext, setDefaultContext } from '../styles/createDefaultContext'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps (ctx) {
|
||||
setDefaultContext()
|
||||
const page = ctx.renderPage()
|
||||
const styleContext = getDefaultContext()
|
||||
return {
|
||||
...page,
|
||||
styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: styleContext.styleManager.sheetsToString() }} />
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const styleContext = getDefaultContext()
|
||||
return (
|
||||
<html lang='en'>
|
||||
<Head>
|
||||
<title>My page</title>
|
||||
<meta charSet='utf-8' />
|
||||
{/* Use minimum-scale=1 to enable GPU rasterization */}
|
||||
<meta
|
||||
name='viewport'
|
||||
content={
|
||||
'user-scalable=0, initial-scale=1, maximum-scale=1, ' +
|
||||
'minimum-scale=1, width=device-width, height=device-height'
|
||||
}
|
||||
/>
|
||||
{/* PWA primary color */}
|
||||
<meta name='theme-color' content={styleContext.theme.palette.primary[500]} />
|
||||
<link
|
||||
rel='stylesheet'
|
||||
href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
||||
64
examples/with-material-ui-next/pages/index.js
Normal file
64
examples/with-material-ui-next/pages/index.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import React, {Component} from 'react'
|
||||
import Button from 'material-ui/Button'
|
||||
import Dialog, {
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions
|
||||
} from 'material-ui/Dialog'
|
||||
import Typography from 'material-ui/Typography'
|
||||
import App from '../components/App'
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
textAlign: 'center',
|
||||
paddingTop: 200
|
||||
}
|
||||
}
|
||||
|
||||
class Index extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
handleRequestClose = () => {
|
||||
this.setState({
|
||||
open: false
|
||||
})
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({
|
||||
open: true
|
||||
})
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<App>
|
||||
<div style={styles.container}>
|
||||
<Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
|
||||
<DialogTitle>Super Secret Password</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>1-2-3-4-5</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button primary onClick={this.handleRequestClose}>OK</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Typography type='display1' gutterBottom>Material-UI</Typography>
|
||||
<Typography type='subheading' gutterBottom>example project</Typography>
|
||||
<Button raised accent onClick={this.handleClick}>
|
||||
Super Secret Password
|
||||
</Button>
|
||||
</div>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Index
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
|
||||
import createPalette from 'material-ui/styles/palette'
|
||||
import createMuiTheme from 'material-ui/styles/theme'
|
||||
import { purple, green } from 'material-ui/styles/colors'
|
||||
|
||||
const createDefaultContext = () =>
|
||||
MuiThemeProvider.createDefaultContext({
|
||||
theme: createMuiTheme({
|
||||
palette: createPalette({
|
||||
primary: purple,
|
||||
accent: green
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Singleton hack as there is no way to pass variables from _document.js to pages yet.
|
||||
let context = null
|
||||
|
||||
export function setDefaultContext () {
|
||||
context = createDefaultContext()
|
||||
}
|
||||
|
||||
export function getDefaultContext () {
|
||||
// Make sure to create a new store for every server-side request so that data
|
||||
// isn't shared between connections (which would be bad)
|
||||
if (!process.browser) {
|
||||
return context
|
||||
}
|
||||
|
||||
// Reuse store on the client-side
|
||||
if (!context) {
|
||||
context = createDefaultContext()
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
export default createDefaultContext
|
||||
|
|
@ -27,7 +27,7 @@ const muiTheme = {
|
|||
}
|
||||
}
|
||||
|
||||
class Main extends Component {
|
||||
class Index extends Component {
|
||||
static getInitialProps ({ req }) {
|
||||
// Ensures material-ui renders the correct css prefixes server-side
|
||||
let userAgent
|
||||
|
|
@ -86,7 +86,7 @@ class Main extends Component {
|
|||
<h2>example project</h2>
|
||||
<RaisedButton
|
||||
label='Super Secret Password'
|
||||
secondary={Boolean(true)}
|
||||
secondary
|
||||
onTouchTap={this.handleTouchTap}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -95,4 +95,4 @@ class Main extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Main
|
||||
export default Index
|
||||
|
|
|
|||
27
examples/with-react-toolbox/README.md
Normal file
27
examples/with-react-toolbox/README.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-toolbox)
|
||||
|
||||
# With react-toolbox example
|
||||
|
||||
## 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-react-toolbox
|
||||
cd with-react-toolbox
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Notice that `yarn toolbox` (or `npm run toolbox`) should be rerun every time the `"reactToolbox"` configuration in `package.json` is changed, in order to update `static/theme.js` and `static/theme.css`. The `"reactToolbox"` configuration includes styling, and the list of react-toolbox components to include.
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
This is a simple example of getting react-toolbox up and running, using [react-toolbox-themr](https://github.com/react-toolbox/react-toolbox-themr).
|
||||
|
||||
For actual use, you probably also want to add Roboto Font, and Material Design Icons. See <http://react-toolbox.com/#/install>
|
||||
35
examples/with-react-toolbox/package.json
Normal file
35
examples/with-react-toolbox/package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "with-react-toolbox",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"toolbox": "react-toolbox-themr"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"next": "latest",
|
||||
"react": "^15.5.4",
|
||||
"react-addons-css-transition-group": "^15.5.2",
|
||||
"react-dom": "^15.5.4",
|
||||
"react-toolbox": "^2.0.0-beta.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-toolbox-themr": "^1.0.2"
|
||||
},
|
||||
"reactToolbox": {
|
||||
"include": [
|
||||
"BUTTON",
|
||||
"DATE_PICKER"
|
||||
],
|
||||
"customProperties": {
|
||||
"animation-duration": "0.3s",
|
||||
"color-accent": "var(--palette-pink-a200)",
|
||||
"color-accent-dark": "var(--palette-pink-700)",
|
||||
"color-primary-contrast": "var(--color-dark-contrast)",
|
||||
"color-accent-contrast": "var(--color-dark-contrast)"
|
||||
},
|
||||
"output": "static"
|
||||
}
|
||||
}
|
||||
16
examples/with-react-toolbox/pages/index.js
Normal file
16
examples/with-react-toolbox/pages/index.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import ThemeProvider from 'react-toolbox/lib/ThemeProvider'
|
||||
import theme from '../static/theme'
|
||||
import Head from 'next/head'
|
||||
|
||||
import Button from 'react-toolbox/lib/button/Button'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Head>
|
||||
<link href='/static/theme.css' rel='stylesheet' />
|
||||
</Head>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Button raised primary>Hello</Button>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
)
|
||||
1
examples/with-react-toolbox/static/theme.css
Normal file
1
examples/with-react-toolbox/static/theme.css
Normal file
File diff suppressed because one or more lines are too long
1
examples/with-react-toolbox/static/theme.js
Normal file
1
examples/with-react-toolbox/static/theme.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
module.exports = {'RTButton': {'button': '_2Agdx', 'rippleWrapper': '_3AVBi', 'squared': '_2GH_L', 'icon': '_3aBSX', 'solid': '_1ZxqC', 'raised': '_221ic _2Agdx _2GH_L _1ZxqC', 'flat': '_1jWAQ _2Agdx _2GH_L', 'floating': '_3IRMZ _2Agdx _1ZxqC', 'mini': '_2DCN-', 'toggle': 'hC5Z2 _2Agdx', 'primary': '_3tTAW', 'accent': '_2wp6F', 'neutral': '_2CPs4', 'inverse': '_2SPZr'}, 'RTRipple': {'rippleWrapper': '_16N7o', 'ripple': '_3SV_u', 'rippleRestarting': '_2OZWa', 'rippleActive': '_3O2Ue'}, 'RTDatePicker': {'input': '_2ISvI', 'disabled': 'Cf3yF', 'inputElement': 'x7MhN', 'header': '_2vLUd', 'year': '_1VWY-', 'date': '_3K2Ws', 'calendarWrapper': '_1t-4v', 'yearsDisplay': '_2OzvT', 'monthsDisplay': '_2DDdC', 'dialog': '_3fCV6', 'button': '_2hL6u', 'calendar': '_1X9ls', 'prev': 'Nv9Bc', 'next': '_3iPkS', 'title': '_2ESpD', 'years': 'zEdgW', 'active': '_1pjXb', 'week': 'PcByv', 'days': '_1qh3T', 'day': '_2qF_L', 'month': '_1hSm5', 'slideRightEnter': 'Rk89h', 'slideRightLeave': '_1nam4', 'slideRightEnterActive': 'm5B3T', 'slideRightLeaveActive': '_2bZap', 'slideLeftEnter': 'bGml_', 'slideLeftLeave': '_2WGqM', 'slideLeftEnterActive': '_3Ghls', 'slideLeftLeaveActive': '_2WLHG'}, 'RTInput': {'input': 'lFVgC', 'withIcon': '_1nKdf', 'icon': '_3ga1V', 'inputElement': '_4bZUj', 'bar': '_3FySS', 'label': '_34120', 'fixed': 'GRQEP', 'required': '_2G0aY', 'hint': 'bMyi_', 'filled': '_34NWn', 'error': '_2k5Jz', 'counter': '_1oTuT', 'disabled': '_3ZfJq', 'errored': '_2s74E', 'hidden': '_2gAMv'}, 'RTDialog': {'wrapper': '_3nrqp', 'dialog': '_3lw90', 'active': '_3ea_1', 'small': '_38VTT', 'normal': '_1K3iz', 'large': '_10LcP', 'fullscreen': '_3tLXQ', 'title': '_2J-aP', 'body': '_1Ivuq', 'navigation': 'wgwdj', 'button': '_22_c6'}, 'RTOverlay': {'overlay': '_2LA9x', 'active': '_1mb5R'}}
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
"next": "latest",
|
||||
"next-redux-wrapper": "^1.0.0",
|
||||
"react": "^15.4.2",
|
||||
"redux-devtools-extension": "^2.13.2",
|
||||
"react-dom": "^15.4.2",
|
||||
"react-redux": "^5.0.1",
|
||||
"redux": "^3.6.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { createStore, applyMiddleware } from 'redux'
|
||||
import { composeWithDevTools } from 'redux-devtools-extension'
|
||||
import thunkMiddleware from 'redux-thunk'
|
||||
|
||||
const exampleInitialState = {
|
||||
|
|
@ -31,7 +32,7 @@ export const serverRenderClock = (isServer) => dispatch => {
|
|||
}
|
||||
|
||||
export const startClock = () => dispatch => {
|
||||
return setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
|
||||
return setInterval(() => dispatch({ type: actionTypes.TICK, light: true, ts: Date.now() }), 800)
|
||||
}
|
||||
|
||||
export const addCount = () => dispatch => {
|
||||
|
|
@ -39,5 +40,5 @@ export const addCount = () => dispatch => {
|
|||
}
|
||||
|
||||
export const initStore = (initialState = exampleInitialState) => {
|
||||
return createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
|
||||
return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)))
|
||||
}
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -56,7 +56,7 @@
|
|||
"babel-plugin-transform-react-jsx-source": "6.22.0",
|
||||
"babel-plugin-transform-react-remove-prop-types": "0.4.5",
|
||||
"babel-plugin-transform-runtime": "6.22.0",
|
||||
"babel-preset-env": "1.5.0",
|
||||
"babel-preset-env": "1.5.1",
|
||||
"babel-preset-react": "6.24.1",
|
||||
"babel-runtime": "6.23.0",
|
||||
"babel-template": "6.24.1",
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
"loader-utils": "1.1.0",
|
||||
"md5-file": "3.1.1",
|
||||
"minimist": "1.2.0",
|
||||
"mitt": "1.1.1",
|
||||
"mitt": "1.1.2",
|
||||
"mkdirp-then": "1.2.0",
|
||||
"mv": "2.1.1",
|
||||
"mz": "2.6.0",
|
||||
|
|
@ -86,12 +86,12 @@
|
|||
"react-hot-loader": "3.0.0-beta.7",
|
||||
"source-map-support": "0.4.15",
|
||||
"strip-ansi": "3.0.1",
|
||||
"styled-jsx": "1.0.2",
|
||||
"styled-jsx": "1.0.3",
|
||||
"touch": "1.0.0",
|
||||
"unfetch": "2.1.2",
|
||||
"url": "0.11.0",
|
||||
"uuid": "3.0.1",
|
||||
"webpack": "2.5.1",
|
||||
"webpack": "2.6.0",
|
||||
"webpack-dev-middleware": "1.10.2",
|
||||
"webpack-hot-middleware": "2.18.0",
|
||||
"write-file-webpack-plugin": "4.0.2",
|
||||
|
|
@ -116,9 +116,9 @@
|
|||
"fly-esnext": "2.0.1",
|
||||
"fly-watch": "1.1.1",
|
||||
"husky": "0.13.3",
|
||||
"jest-cli": "20.0.2",
|
||||
"jest-cli": "20.0.4",
|
||||
"lint-staged": "^3.4.0",
|
||||
"node-fetch": "1.6.3",
|
||||
"node-fetch": "1.7.0",
|
||||
"node-notifier": "5.1.2",
|
||||
"nyc": "10.3.2",
|
||||
"react": "15.5.3",
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export default () => (
|
|||
)
|
||||
```
|
||||
|
||||
Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples.
|
||||
Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-jsx) for more examples.
|
||||
|
||||
#### CSS-in-JS
|
||||
|
||||
|
|
@ -864,7 +864,11 @@ Then run `now` and enjoy!
|
|||
|
||||
Next.js can be deployed to other hosting solutions too. Please have a look at the ['Deployment'](https://github.com/zeit/next.js/wiki/Deployment) section of the wiki.
|
||||
|
||||
<<<<<<< HEAD
|
||||
Note: we recommend putting `.next`, or your custom dist folder (you can set a custom folder in ['Custom Config'](https://github.com/zeit/next.js#custom-configuration)), in `.npmignore` or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder)
|
||||
=======
|
||||
Note: we recommend putting `.next`, or your custom dist folder (Please have a look at ['Custom Config'](https://github.com/zeit/next.js#custom-configuration). You can set a custom folder in config, `.npmignore`, or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder).
|
||||
>>>>>>> 0ec33c8ccdf8e55f6fedd64d7d358b030527813c
|
||||
|
||||
## Static HTML export
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue