From b225e38eedf78b1d54b5ee0cd852812298ed2df5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 2 Dec 2017 17:45:50 -0800 Subject: [PATCH 01/20] Add .jsx extension --- server/build/webpack.js | 11 +++--- server/config.js | 2 +- server/resolve.js | 4 ++ server/utils.js | 4 +- .../custom-extensions/components/world.jsx | 3 ++ .../custom-extensions/pages/index.jsx | 4 ++ .../custom-extensions/test/index.test.js | 38 +++++++++++++++++++ 7 files changed, 58 insertions(+), 8 deletions(-) create mode 100644 test/integration/custom-extensions/components/world.jsx create mode 100644 test/integration/custom-extensions/pages/index.jsx create mode 100644 test/integration/custom-extensions/test/index.test.js diff --git a/server/build/webpack.js b/server/build/webpack.js index 5c67aca6aad4..e4f9c3e72330 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -192,14 +192,14 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet } const rules = (dev ? [{ - test: /\.js(\?[^?]*)?$/, + test: /\.(js|jsx)(\?[^?]*)?$/, loader: 'hot-self-accept-loader', include: [ join(dir, 'pages'), nextPagesDir ] }, { - test: /\.js(\?[^?]*)?$/, + test: /\.(js|jsx)(\?[^?]*)?$/, loader: 'react-hot-loader/webpack', exclude: /node_modules/ }] : []) @@ -207,7 +207,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet test: /\.json$/, loader: 'json-loader' }, { - test: /\.(js|json)(\?[^?]*)?$/, + test: /\.(js|jsx|json)(\?[^?]*)?$/, loader: 'emit-file-loader', include: [dir, nextPagesDir], exclude (str) { @@ -220,7 +220,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // But Node.js doesn't know how to handle them. So, we have to transpile them here. transform ({ content, sourceMap, interpolatedName }) { // Only handle .js files - if (!(/\.js$/.test(interpolatedName))) { + if (!(/\.(js|jsx)$/.test(interpolatedName))) { return { content, sourceMap } } @@ -291,7 +291,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet presets: [require.resolve('./babel/preset')] } }, { - test: /\.js(\?[^?]*)?$/, + test: /\.(js|jsx)(\?[^?]*)?$/, loader: 'babel-loader', include: [dir], exclude (str) { @@ -321,6 +321,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet chunkFilename: '[name]' }, resolve: { + extensions: ['.js', '.jsx', '.json'], modules: [ nextNodeModulesDir, 'node_modules', diff --git a/server/config.js b/server/config.js index 7c61fdd384d5..10fcddd3bbde 100644 --- a/server/config.js +++ b/server/config.js @@ -11,7 +11,7 @@ const defaultConfig = { assetPrefix: '', configOrigin: 'default', useFileSystemPublicRoutes: true, - pagesGlobPattern: 'pages/**/*.js' + pagesGlobPattern: 'pages/**/*.+(js|jsx)' } export default function getConfig (dir, customConfig) { diff --git a/server/resolve.js b/server/resolve.js index 2e6c2c898156..543dded79112 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,11 +27,13 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] + if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', + i + 'index.jsx', i + 'index.json' ] } @@ -39,6 +41,8 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), + i + '.jsx', + join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] diff --git a/server/utils.js b/server/utils.js index 7bc32431e2a1..b7d3b7607614 100644 --- a/server/utils.js +++ b/server/utils.js @@ -1,8 +1,8 @@ import { join } from 'path' import { readdirSync, existsSync } from 'fs' -export const IS_BUNDLED_PAGE = /^bundles[/\\]pages.*\.js$/ -export const MATCH_ROUTE_NAME = /^bundles[/\\]pages[/\\](.*)\.js$/ +export const IS_BUNDLED_PAGE = /^bundles[/\\]pages.*\.(js|jsx)$/ +export const MATCH_ROUTE_NAME = /^bundles[/\\]pages[/\\](.*)\.(js|jsx)$/ export function getAvailableChunks (dir, dist) { const chunksDir = join(dir, dist, 'chunks') diff --git a/test/integration/custom-extensions/components/world.jsx b/test/integration/custom-extensions/components/world.jsx new file mode 100644 index 000000000000..f9320963985c --- /dev/null +++ b/test/integration/custom-extensions/components/world.jsx @@ -0,0 +1,3 @@ +export const World = () => ( +
World
+ ) diff --git a/test/integration/custom-extensions/pages/index.jsx b/test/integration/custom-extensions/pages/index.jsx new file mode 100644 index 000000000000..95663711ce99 --- /dev/null +++ b/test/integration/custom-extensions/pages/index.jsx @@ -0,0 +1,4 @@ +import {World} from '../components/world' +export default () => ( +
Hello
+) diff --git a/test/integration/custom-extensions/test/index.test.js b/test/integration/custom-extensions/test/index.test.js new file mode 100644 index 000000000000..85e7f0b82d5a --- /dev/null +++ b/test/integration/custom-extensions/test/index.test.js @@ -0,0 +1,38 @@ +/* global jasmine, describe, it, expect, beforeAll, afterAll */ + +import { join } from 'path' +import { + nextServer, + nextBuild, + startApp, + stopApp, + renderViaHTTP +} from 'next-test-utils' + +const appDir = join(__dirname, '../') +let appPort +let server +let app +jasmine.DEFAULT_TIMEOUT_INTERVAL = 40000 + +describe('Custom extensions', () => { + beforeAll(async () => { + await nextBuild(appDir) + app = nextServer({ + dir: join(__dirname, '../'), + dev: false, + quiet: true + }) + + server = await startApp(app) + appPort = server.address().port + }) + afterAll(() => stopApp(server)) + + describe('With basic usage', () => { + it('should render the page', async () => { + const html = await renderViaHTTP(appPort, '/') + expect(html).toMatch(/Hello.*World<\/div>/) + }) + }) +}) From ce89edcd85253b9635783deb1a3e14cd851367a9 Mon Sep 17 00:00:00 2001 From: Fouad Matin Date: Sat, 2 Dec 2017 20:30:17 -0800 Subject: [PATCH 02/20] examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme --- examples/active-class-name/README.md | 11 ++++++++++ examples/basic-css/README.md | 11 ++++++++++ examples/custom-server-express/README.md | 11 ++++++++++ examples/custom-server-fastify/README.md | 11 ++++++++++ examples/custom-server-hapi/README.md | 11 ++++++++++ examples/custom-server-koa/README.md | 11 ++++++++++ examples/custom-server-micro/README.md | 11 ++++++++++ examples/custom-server-nodemon/README.md | 11 ++++++++++ examples/custom-server/README.md | 11 ++++++++++ examples/data-fetch/README.md | 11 ++++++++++ examples/form-handler/README.md | 11 ++++++++++ examples/head-elements/README.md | 11 ++++++++++ examples/hello-world/README.md | 11 ++++++++++ examples/layout-component/README.md | 11 ++++++++++ examples/nested-components/README.md | 11 ++++++++++ examples/page-transitions/README.md | 11 ++++++++++ examples/parameterized-routing/README.md | 11 ++++++++++ examples/progressive-render/README.md | 11 ++++++++++ examples/root-static-files/README.md | 11 ++++++++++ examples/shared-modules/README.md | 11 ++++++++++ examples/ssr-caching/README.md | 11 ++++++++++ examples/svg-components/README.md | 11 ++++++++++ examples/using-inferno/README.md | 11 ++++++++++ examples/using-preact/README.md | 11 ++++++++++ examples/using-router/README.md | 11 ++++++++++ examples/using-with-router/README.md | 11 ++++++++++ examples/with-absolute-imports/README.md | 11 ++++++++++ .../README.md | 11 ++++++++++ examples/with-amp/README.md | 11 ++++++++++ examples/with-ant-design/README.md | 11 ++++++++++ examples/with-antd-mobile/README.md | 11 ++++++++++ examples/with-aphrodite/README.md | 11 ++++++++++ examples/with-apollo-and-redux/README.md | 11 ++++++++++ examples/with-apollo-auth/README.md | 11 ++++++++++ examples/with-apollo/README.md | 11 ++++++++++ examples/with-asset-imports/README.md | 11 ++++++++++ examples/with-babel-macros/README.md | 11 ++++++++++ examples/with-cxs/README.md | 11 ++++++++++ examples/with-dotenv/README.md | 11 ++++++++++ examples/with-dynamic-import/README.md | 11 ++++++++++ examples/with-electron/readme.md | 13 ++++++++++- examples/with-emotion/README.md | 11 ++++++++++ examples/with-fela/README.md | 11 ++++++++++ .../with-firebase-authentication/README.md | 11 ++++++++++ examples/with-firebase-hosting/README.md | 11 ++++++++++ examples/with-flow/README.md | 11 ++++++++++ examples/with-freactal/README.md | 11 ++++++++++ examples/with-glamor/README.md | 11 ++++++++++ examples/with-glamorous/README.md | 11 ++++++++++ examples/with-global-stylesheet/README.md | 11 ++++++++++ examples/with-hashed-statics/README.md | 11 ++++++++++ .../with-higher-order-component/README.md | 11 ++++++++++ examples/with-i18next/README.md | 11 ++++++++++ examples/with-jest/README.md | 11 ++++++++++ examples/with-kea/README.md | 11 ++++++++++ examples/with-loading/README.md | 11 ++++++++++ examples/with-material-ui-next/README.md | 11 ++++++++++ examples/with-material-ui/README.md | 11 ++++++++++ examples/with-mobx/README.md | 11 ++++++++++ examples/with-next-routes/README.md | 11 ++++++++++ examples/with-noscript/README.md | 11 ++++++++++ examples/with-pkg/README.md | 11 ++++++++++ examples/with-portals/README.md | 11 ++++++++++ examples/with-prefetching/README.md | 11 ++++++++++ examples/with-pretty-url-routing/README.md | 11 ++++++++++ examples/with-react-ga/README.md | 11 ++++++++++ examples/with-react-helmet/README.md | 11 ++++++++++ examples/with-react-intl/README.md | 11 ++++++++++ examples/with-react-md/README.md | 11 ++++++++++ examples/with-react-toolbox/README.md | 11 ++++++++++ examples/with-react-uwp/README.md | 11 ++++++++++ examples/with-react-with-styles/README.md | 11 ++++++++++ examples/with-reasonml/README.md | 11 ++++++++++ examples/with-rebass/README.md | 11 ++++++++++ examples/with-recompose/README.md | 11 ++++++++++ examples/with-redux-code-splitting/README.md | 11 ++++++++++ examples/with-redux-observable/README.md | 11 ++++++++++ .../with-redux-reselect-recompose/README.md | 11 ++++++++++ examples/with-redux-saga/README.md | 11 ++++++++++ examples/with-redux/README.md | 11 ++++++++++ examples/with-refnux/README.md | 11 ++++++++++ examples/with-relay-modern/README.md | 11 ++++++++++ .../README.md | 11 ++++++++++ examples/with-semantic-ui/README.md | 11 ++++++++++ examples/with-sentry/README.md | 11 ++++++++++ examples/with-shallow-routing/README.md | 11 ++++++++++ examples/with-socket.io/README.md | 11 ++++++++++ examples/with-static-export/README.md | 11 ++++++++++ examples/with-styled-components/README.md | 11 ++++++++++ examples/with-styled-jsx-plugins/README.md | 11 ++++++++++ examples/with-styled-jsx-scss/README.md | 11 ++++++++++ examples/with-styletron/README.md | 11 ++++++++++ examples/with-sw-precache/README.md | 11 ++++++++++ examples/with-tailwindcss/README.md | 11 ++++++++++ examples/with-typescript/README.md | 22 ++++++++++++++++++- .../readme.md | 11 ++++++++++ .../with-universal-configuration/README.md | 11 ++++++++++ examples/with-url-object-routing/README.md | 11 ++++++++++ .../with-webpack-bundle-analyzer/README.md | 11 ++++++++++ .../README.md | 11 ++++++++++ 100 files changed, 1111 insertions(+), 2 deletions(-) diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md index 7f8b074e6c2c..0425243a78c7 100644 --- a/examples/active-class-name/README.md +++ b/examples/active-class-name/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example active-class-name active-class-name-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/basic-css/README.md b/examples/basic-css/README.md index 22ce99b448e4..fc7ee659fbd6 100644 --- a/examples/basic-css/README.md +++ b/examples/basic-css/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example basic-css basic-css-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server-express/README.md b/examples/custom-server-express/README.md index ce3efd0d4abd..4cda170e7506 100644 --- a/examples/custom-server-express/README.md +++ b/examples/custom-server-express/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server-express custom-server-express-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server-fastify/README.md b/examples/custom-server-fastify/README.md index 12055aaf91fa..404558388e59 100644 --- a/examples/custom-server-fastify/README.md +++ b/examples/custom-server-fastify/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server-fastify custom-server-fastify-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server-hapi/README.md b/examples/custom-server-hapi/README.md index 629fae4cb413..a9c60259b7ed 100644 --- a/examples/custom-server-hapi/README.md +++ b/examples/custom-server-hapi/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server-hapi custom-server-hapi-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server-koa/README.md b/examples/custom-server-koa/README.md index eb0a9df07ad9..284ff45ab2ed 100644 --- a/examples/custom-server-koa/README.md +++ b/examples/custom-server-koa/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server-koa custom-server-koa-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server-micro/README.md b/examples/custom-server-micro/README.md index 6acf0955d581..16212bad98c1 100644 --- a/examples/custom-server-micro/README.md +++ b/examples/custom-server-micro/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server-micro custom-server-micro-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server-nodemon/README.md b/examples/custom-server-nodemon/README.md index 91ed60e18e3f..57520a23285f 100644 --- a/examples/custom-server-nodemon/README.md +++ b/examples/custom-server-nodemon/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server-nodemon custom-server-nodemon-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/custom-server/README.md b/examples/custom-server/README.md index c94fc2ce3ef1..c0df13dcd277 100644 --- a/examples/custom-server/README.md +++ b/examples/custom-server/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example custom-server custom-server-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md index d4da62d8a5ff..b704198ab91a 100644 --- a/examples/data-fetch/README.md +++ b/examples/data-fetch/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example data-fetch data-fetch-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/form-handler/README.md b/examples/form-handler/README.md index bd9ea3c2e7ff..970eda08b9a8 100644 --- a/examples/form-handler/README.md +++ b/examples/form-handler/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example form-handler form-handler-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/head-elements/README.md b/examples/head-elements/README.md index ecdc0e6f1d80..bbff8e45f2fd 100644 --- a/examples/head-elements/README.md +++ b/examples/head-elements/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example head-elements head-elements-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md index f183313034c0..c03900fe0855 100644 --- a/examples/hello-world/README.md +++ b/examples/hello-world/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example hello-world hello-world-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md index 468d4d7b77ed..6a167e1447e1 100644 --- a/examples/layout-component/README.md +++ b/examples/layout-component/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example layout-component layout-component-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/nested-components/README.md b/examples/nested-components/README.md index e9d60263373e..eebc9125725c 100644 --- a/examples/nested-components/README.md +++ b/examples/nested-components/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example nested-components nested-components-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/page-transitions/README.md b/examples/page-transitions/README.md index ab532dff3991..20ef9d57dfdf 100644 --- a/examples/page-transitions/README.md +++ b/examples/page-transitions/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example page-transitions page-transitions-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/parameterized-routing/README.md b/examples/parameterized-routing/README.md index b37cb2bdd1b6..2bc64793a183 100644 --- a/examples/parameterized-routing/README.md +++ b/examples/parameterized-routing/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example parameterized-routing parameterized-routing-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index c9fa4d1cdc5c..99b6d6228b1f 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example progressive-render progressive-render-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/root-static-files/README.md b/examples/root-static-files/README.md index adcc63cc3e22..5ad25ddb7114 100644 --- a/examples/root-static-files/README.md +++ b/examples/root-static-files/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example root-static-files root-static-files-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md index 0ba99de5fa4a..e99fc89c3f07 100644 --- a/examples/shared-modules/README.md +++ b/examples/shared-modules/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example shared-modules shared-modules-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/ssr-caching/README.md b/examples/ssr-caching/README.md index 5fc6d7f710a8..9b700e4d448a 100644 --- a/examples/ssr-caching/README.md +++ b/examples/ssr-caching/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example ssr-caching ssr-caching-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md index b7e274d73510..a0af06d107ff 100644 --- a/examples/svg-components/README.md +++ b/examples/svg-components/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example svg-components svg-components-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/using-inferno/README.md b/examples/using-inferno/README.md index 69bd5fc75c3f..8f0985299103 100644 --- a/examples/using-inferno/README.md +++ b/examples/using-inferno/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example using-inferno using-inferno-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/using-preact/README.md b/examples/using-preact/README.md index fef5b3e29f28..6789d65e3e09 100644 --- a/examples/using-preact/README.md +++ b/examples/using-preact/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example using-preact using-preact-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/using-router/README.md b/examples/using-router/README.md index ba15e97ab159..4bd1976e4940 100644 --- a/examples/using-router/README.md +++ b/examples/using-router/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example using-router using-router-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/using-with-router/README.md b/examples/using-with-router/README.md index 7d8988af14d1..4af15006fb45 100644 --- a/examples/using-with-router/README.md +++ b/examples/using-with-router/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example using-with-router using-with-router-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md index 6897209c130c..b1e21c3e4a10 100644 --- a/examples/with-absolute-imports/README.md +++ b/examples/with-absolute-imports/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-absolute-imports with-absolute-imports-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-algolia-react-instantsearch/README.md b/examples/with-algolia-react-instantsearch/README.md index ef25a49972ee..d60b9ef1589a 100644 --- a/examples/with-algolia-react-instantsearch/README.md +++ b/examples/with-algolia-react-instantsearch/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-algolia-react-instantsearch with-algolia-react-instantsearch-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-amp/README.md b/examples/with-amp/README.md index c0e1d187e3f1..5f8633a65e1b 100644 --- a/examples/with-amp/README.md +++ b/examples/with-amp/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-amp with-amp-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js.git): ```bash diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md index efa5cf4a32da..738f23eee10c 100644 --- a/examples/with-ant-design/README.md +++ b/examples/with-ant-design/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-ant-design with-ant-design-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-antd-mobile/README.md b/examples/with-antd-mobile/README.md index 236a5f2e9fc8..287a8fb2de68 100644 --- a/examples/with-antd-mobile/README.md +++ b/examples/with-antd-mobile/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-antd-mobile with-antd-mobile-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-aphrodite/README.md b/examples/with-aphrodite/README.md index 7102dead9e7b..0c7b48aa2b3d 100644 --- a/examples/with-aphrodite/README.md +++ b/examples/with-aphrodite/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-aphrodite with-aphrodite-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md index 71061592624c..47bcfc4758dd 100644 --- a/examples/with-apollo-and-redux/README.md +++ b/examples/with-apollo-and-redux/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-apollo-and-redux with-apollo-and-redux-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-apollo-auth/README.md b/examples/with-apollo-auth/README.md index 4b241eb332b3..98666c9f4b77 100644 --- a/examples/with-apollo-auth/README.md +++ b/examples/with-apollo-auth/README.md @@ -7,6 +7,17 @@ https://next-with-apollo-auth.now.sh ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-apollo-auth with-apollo-auth-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-apollo/README.md b/examples/with-apollo/README.md index a283a645eb23..df10d3dcd0e4 100644 --- a/examples/with-apollo/README.md +++ b/examples/with-apollo/README.md @@ -7,6 +7,17 @@ https://next-with-apollo.now.sh ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-apollo with-apollo-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-asset-imports/README.md b/examples/with-asset-imports/README.md index 2c7d73dd0f79..10d0e2c5d16a 100644 --- a/examples/with-asset-imports/README.md +++ b/examples/with-asset-imports/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-asset-imports with-asset-imports-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-babel-macros/README.md b/examples/with-babel-macros/README.md index 32e38d790cf2..efb630737325 100644 --- a/examples/with-babel-macros/README.md +++ b/examples/with-babel-macros/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-babel-macros with-babel-macros-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-cxs/README.md b/examples/with-cxs/README.md index e8e9d886c35a..632233f1a6c7 100644 --- a/examples/with-cxs/README.md +++ b/examples/with-cxs/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-cxs with-cxs-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-dotenv/README.md b/examples/with-dotenv/README.md index 3362a4f01134..6cce16bfccb8 100644 --- a/examples/with-dotenv/README.md +++ b/examples/with-dotenv/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-dotenv with-dotenv-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md index 3c16ce44b8c0..4ace8e52b3ed 100644 --- a/examples/with-dynamic-import/README.md +++ b/examples/with-dynamic-import/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-dynamic-import with-dynamic-import-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-electron/readme.md b/examples/with-electron/readme.md index 9f1161220aea..def1c54191f5 100644 --- a/examples/with-electron/readme.md +++ b/examples/with-electron/readme.md @@ -2,7 +2,18 @@ **You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!** -## Usage +## How to use + +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-electron with-electron-app +``` + +### Download manually Download the example [or clone the repo](https://github.com/zeit/next.js): diff --git a/examples/with-emotion/README.md b/examples/with-emotion/README.md index ded4897c68ed..88c29ee0c063 100644 --- a/examples/with-emotion/README.md +++ b/examples/with-emotion/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-emotion with-emotion-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md index 961986378009..327c4cac9975 100644 --- a/examples/with-fela/README.md +++ b/examples/with-fela/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-fela with-fela-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-firebase-authentication/README.md b/examples/with-firebase-authentication/README.md index 30297e4093cb..7f3a1c0f08d7 100644 --- a/examples/with-firebase-authentication/README.md +++ b/examples/with-firebase-authentication/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-firebase-authentication with-firebase-authentication-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-firebase-hosting/README.md b/examples/with-firebase-hosting/README.md index a189d5d5206a..7285decc8347 100644 --- a/examples/with-firebase-hosting/README.md +++ b/examples/with-firebase-hosting/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-firebase-hosting with-firebase-hosting-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md index f3d4dc314249..c5aa0f6ceeea 100644 --- a/examples/with-flow/README.md +++ b/examples/with-flow/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-flow with-flow-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-freactal/README.md b/examples/with-freactal/README.md index 125d0f0c9716..5978db70280a 100644 --- a/examples/with-freactal/README.md +++ b/examples/with-freactal/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-freactal with-freactal-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-glamor/README.md b/examples/with-glamor/README.md index e358ea09024c..90172624a0d0 100644 --- a/examples/with-glamor/README.md +++ b/examples/with-glamor/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-glamor with-glamor-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-glamorous/README.md b/examples/with-glamorous/README.md index e50aed537ff0..e3442fc85246 100644 --- a/examples/with-glamorous/README.md +++ b/examples/with-glamorous/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-glamorous with-glamorous-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md index 2a92a51f34a4..3c4b6212a6b4 100644 --- a/examples/with-global-stylesheet/README.md +++ b/examples/with-global-stylesheet/README.md @@ -6,6 +6,17 @@ This is an example of how you can include a global stylesheet in a next.js webap ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-global-stylesheet with-global-stylesheet-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-hashed-statics/README.md b/examples/with-hashed-statics/README.md index 9f3b2c9deb58..6043bd03697e 100644 --- a/examples/with-hashed-statics/README.md +++ b/examples/with-hashed-statics/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-hashed-statics with-hashed-statics-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md index c58aa28fda93..f9d96db9f051 100644 --- a/examples/with-higher-order-component/README.md +++ b/examples/with-higher-order-component/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-higher-order-component with-higher-order-component-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): Install it and run: diff --git a/examples/with-i18next/README.md b/examples/with-i18next/README.md index d5f129f29fcb..06eb990acc59 100644 --- a/examples/with-i18next/README.md +++ b/examples/with-i18next/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-i18next with-i18next-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-jest/README.md b/examples/with-jest/README.md index 9e458162b743..0ab071502b50 100644 --- a/examples/with-jest/README.md +++ b/examples/with-jest/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-jest with-jest-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md index 9741b7c24997..25de6c64df18 100644 --- a/examples/with-kea/README.md +++ b/examples/with-kea/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-kea with-kea-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md index 82425223207f..0e02e90d8feb 100644 --- a/examples/with-loading/README.md +++ b/examples/with-loading/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-loading with-loading-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-material-ui-next/README.md b/examples/with-material-ui-next/README.md index 6745543ca2ce..6a60d406bedd 100644 --- a/examples/with-material-ui-next/README.md +++ b/examples/with-material-ui-next/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-material-ui-next with-material-ui-next-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/callemall/material-ui): ```bash diff --git a/examples/with-material-ui/README.md b/examples/with-material-ui/README.md index ed61db9649c6..ba3a0aae4412 100644 --- a/examples/with-material-ui/README.md +++ b/examples/with-material-ui/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-material-ui with-material-ui-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md index 8bb6ba987ad8..fa130796f991 100644 --- a/examples/with-mobx/README.md +++ b/examples/with-mobx/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-mobx with-mobx-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-next-routes/README.md b/examples/with-next-routes/README.md index e9a0bb2514a4..ccd5b06f4c02 100644 --- a/examples/with-next-routes/README.md +++ b/examples/with-next-routes/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-next-routes with-next-routes-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-noscript/README.md b/examples/with-noscript/README.md index 4dbc1d868da1..2cac2cfbe179 100644 --- a/examples/with-noscript/README.md +++ b/examples/with-noscript/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-noscript with-noscript-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ## Development diff --git a/examples/with-pkg/README.md b/examples/with-pkg/README.md index 4a2b74903a46..a65b377d003d 100644 --- a/examples/with-pkg/README.md +++ b/examples/with-pkg/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-pkg with-pkg-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md index a998b6f015df..b2b9e41649c8 100644 --- a/examples/with-portals/README.md +++ b/examples/with-portals/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-portals with-portals-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-prefetching/README.md b/examples/with-prefetching/README.md index 2a6f09732443..495197990222 100644 --- a/examples/with-prefetching/README.md +++ b/examples/with-prefetching/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-prefetching with-prefetching-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-pretty-url-routing/README.md b/examples/with-pretty-url-routing/README.md index 4ce465835255..11fe5186b7f4 100644 --- a/examples/with-pretty-url-routing/README.md +++ b/examples/with-pretty-url-routing/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-pretty-url-routing with-pretty-url-routing-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-react-ga/README.md b/examples/with-react-ga/README.md index f37b9c679ca6..61dc2042062b 100644 --- a/examples/with-react-ga/README.md +++ b/examples/with-react-ga/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-ga with-react-ga-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md index 1f8cde2c578e..4dec158bfd01 100644 --- a/examples/with-react-helmet/README.md +++ b/examples/with-react-helmet/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-helmet with-react-helmet-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md index f29d91cb2dfe..be85f682920a 100644 --- a/examples/with-react-intl/README.md +++ b/examples/with-react-intl/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-intl with-react-intl-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js.git): ```bash diff --git a/examples/with-react-md/README.md b/examples/with-react-md/README.md index c482b88d4a12..f6d1f994c9f9 100644 --- a/examples/with-react-md/README.md +++ b/examples/with-react-md/README.md @@ -6,6 +6,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-md with-react-md-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md index c0a0245321df..f8cbb875d3bc 100644 --- a/examples/with-react-toolbox/README.md +++ b/examples/with-react-toolbox/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-toolbox with-react-toolbox-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-react-uwp/README.md b/examples/with-react-uwp/README.md index f76671e9b96e..d7833aebad52 100644 --- a/examples/with-react-uwp/README.md +++ b/examples/with-react-uwp/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-uwp with-react-uwp-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md index 9b86592299dc..f54cf5968ee0 100644 --- a/examples/with-react-with-styles/README.md +++ b/examples/with-react-with-styles/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-react-with-styles with-react-with-styles-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-reasonml/README.md b/examples/with-reasonml/README.md index 81db0dfed5ae..4eae7099fbf6 100644 --- a/examples/with-reasonml/README.md +++ b/examples/with-reasonml/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-reasonml with-reasonml-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-rebass/README.md b/examples/with-rebass/README.md index 7b7ab1c70ff9..26b8fd25464a 100644 --- a/examples/with-rebass/README.md +++ b/examples/with-rebass/README.md @@ -6,6 +6,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-rebass with-rebass-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-recompose/README.md b/examples/with-recompose/README.md index bfdeabd1d6f3..ba08a50ed222 100644 --- a/examples/with-recompose/README.md +++ b/examples/with-recompose/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-recompose with-recompose-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-redux-code-splitting/README.md b/examples/with-redux-code-splitting/README.md index 2a8a204e9f3c..23a7335f8f90 100644 --- a/examples/with-redux-code-splitting/README.md +++ b/examples/with-redux-code-splitting/README.md @@ -5,6 +5,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-redux-code-splitting with-redux-code-splitting-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-redux-observable/README.md b/examples/with-redux-observable/README.md index f3812b7edc72..d150136cd5b5 100644 --- a/examples/with-redux-observable/README.md +++ b/examples/with-redux-observable/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-redux-observable with-redux-observable-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-redux-reselect-recompose/README.md b/examples/with-redux-reselect-recompose/README.md index ae0771b68d13..8dd40016da8a 100644 --- a/examples/with-redux-reselect-recompose/README.md +++ b/examples/with-redux-reselect-recompose/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-redux-reselect-recompose with-redux-reselect-recompose-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-redux-saga/README.md b/examples/with-redux-saga/README.md index 318463f7d014..74b3bb12c04c 100644 --- a/examples/with-redux-saga/README.md +++ b/examples/with-redux-saga/README.md @@ -6,6 +6,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-redux-saga with-redux-saga-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-redux/README.md b/examples/with-redux/README.md index d0da0e4c3a35..f97736223306 100644 --- a/examples/with-redux/README.md +++ b/examples/with-redux/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-redux with-redux-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-refnux/README.md b/examples/with-refnux/README.md index ecc6cb2750f2..6f1d8ddfa1e6 100644 --- a/examples/with-refnux/README.md +++ b/examples/with-refnux/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-refnux with-refnux-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-relay-modern/README.md b/examples/with-relay-modern/README.md index 9759952f555f..154c2dc4d3e9 100644 --- a/examples/with-relay-modern/README.md +++ b/examples/with-relay-modern/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-relay-modern with-relay-modern-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-scoped-stylesheets-and-postcss/README.md b/examples/with-scoped-stylesheets-and-postcss/README.md index a00b256d0aee..e02951ee33de 100644 --- a/examples/with-scoped-stylesheets-and-postcss/README.md +++ b/examples/with-scoped-stylesheets-and-postcss/README.md @@ -5,6 +5,17 @@ This is an example of using scoped stylesheets and PostCSS, heavily influenced b ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-scoped-stylesheets-and-postcss with-scoped-stylesheets-and-postcss-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-semantic-ui/README.md b/examples/with-semantic-ui/README.md index 217f9bda42db..b1814ff7c4c0 100644 --- a/examples/with-semantic-ui/README.md +++ b/examples/with-semantic-ui/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-semantic-ui with-semantic-ui-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md index 7d15975cb743..3b5476951e53 100644 --- a/examples/with-sentry/README.md +++ b/examples/with-sentry/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-sentry with-sentry-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): Install it and run: diff --git a/examples/with-shallow-routing/README.md b/examples/with-shallow-routing/README.md index 05abbd31747a..ea74f59fe81c 100644 --- a/examples/with-shallow-routing/README.md +++ b/examples/with-shallow-routing/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-shallow-routing with-shallow-routing-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-socket.io/README.md b/examples/with-socket.io/README.md index 1b35df46f31c..10e1c7e0702e 100644 --- a/examples/with-socket.io/README.md +++ b/examples/with-socket.io/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-socket.io with-socket.io-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-static-export/README.md b/examples/with-static-export/README.md index eb620087c6a6..a30406c1de10 100644 --- a/examples/with-static-export/README.md +++ b/examples/with-static-export/README.md @@ -2,6 +2,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-static-export with-static-export-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 57aaac6e73ad..4ae3c97f8525 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-styled-components with-styled-components-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-styled-jsx-plugins/README.md b/examples/with-styled-jsx-plugins/README.md index 09cb39392326..0df9cff02e02 100644 --- a/examples/with-styled-jsx-plugins/README.md +++ b/examples/with-styled-jsx-plugins/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-styled-jsx-plugins with-styled-jsx-plugins-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md index 60aeee10637b..1240a31e4df5 100644 --- a/examples/with-styled-jsx-scss/README.md +++ b/examples/with-styled-jsx-scss/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-styled-jsx-scss with-styled-jsx-scss-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-styletron/README.md b/examples/with-styletron/README.md index 2be74ea6e507..2a2e394b49c8 100644 --- a/examples/with-styletron/README.md +++ b/examples/with-styletron/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-styletron with-styletron-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-sw-precache/README.md b/examples/with-sw-precache/README.md index 5f3e7b24c816..7b987f62a461 100644 --- a/examples/with-sw-precache/README.md +++ b/examples/with-sw-precache/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-sw-precache with-sw-precache-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md index c20bc17066ec..adf7e3d6b0c8 100644 --- a/examples/with-tailwindcss/README.md +++ b/examples/with-tailwindcss/README.md @@ -6,6 +6,17 @@ This is an example of how you can include a global stylesheet in a next.js webap ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-tailwindcss with-tailwindcss-app +``` + +### Download manually + If you like [create-next-app](https://github.com/segmentio/create-next-app) and/or [yarn](https://yarnpkg.com/en/docs/cli/create) simply run: ```bash diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md index 5c2ff819fec0..4552794d078d 100644 --- a/examples/with-typescript/README.md +++ b/examples/with-typescript/README.md @@ -4,8 +4,28 @@ This is a really simple project that show the usage of Next.js with TypeScript. -## How to use it? +## How to use it? +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-typescript with-typescript-app +``` + +### Download manually + +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-typescript +cd with-typescript +``` + +Install it and run: + ``` npm install npm run dev diff --git a/examples/with-universal-configuration-runtime/readme.md b/examples/with-universal-configuration-runtime/readme.md index c072e6b63969..ed47feb881aa 100644 --- a/examples/with-universal-configuration-runtime/readme.md +++ b/examples/with-universal-configuration-runtime/readme.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-universal-configuration-runtime with-universal-configuration-runtime-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-universal-configuration/README.md b/examples/with-universal-configuration/README.md index 66a6a3139f91..b72559322f0a 100644 --- a/examples/with-universal-configuration/README.md +++ b/examples/with-universal-configuration/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-universal-configuration with-universal-configuration-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-url-object-routing/README.md b/examples/with-url-object-routing/README.md index 88a116216646..c8af71130b9c 100644 --- a/examples/with-url-object-routing/README.md +++ b/examples/with-url-object-routing/README.md @@ -3,6 +3,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-url-object-routing with-url-object-routing-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-webpack-bundle-analyzer/README.md b/examples/with-webpack-bundle-analyzer/README.md index 00619a4311f3..eb6b5f66f024 100644 --- a/examples/with-webpack-bundle-analyzer/README.md +++ b/examples/with-webpack-bundle-analyzer/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-webpack-bundle-analyzer with-webpack-bundle-analyzer-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash diff --git a/examples/with-webpack-bundle-size-analyzer/README.md b/examples/with-webpack-bundle-size-analyzer/README.md index c20efc4c6270..e5bfb42c0652 100644 --- a/examples/with-webpack-bundle-size-analyzer/README.md +++ b/examples/with-webpack-bundle-size-analyzer/README.md @@ -4,6 +4,17 @@ ## How to use +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-webpack-bundle-size-analyzer with-webpack-bundle-size-analyzer-app +``` + +### Download manually + Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash From 054055831d0bd56abb0c4d2ab27b2cf843b80fa8 Mon Sep 17 00:00:00 2001 From: dsantic Date: Sun, 3 Dec 2017 23:58:46 +0100 Subject: [PATCH 03/20] Upgrading with-flow example to the latest flow-bin ver. 0.59.0 (#3337) For upgrading I used flow-upgrade module by https://yarnpkg.com/en/package/flow-upgrade --- examples/with-flow/.flowconfig | 1 + examples/with-flow/components/layout.js | 4 ++-- examples/with-flow/package.json | 2 +- examples/with-flow/pages/about.js | 2 +- examples/with-flow/pages/contact.js | 2 +- examples/with-flow/pages/index.js | 2 +- examples/with-flow/types/next.js.flow | 14 +++++++------- 7 files changed, 14 insertions(+), 13 deletions(-) diff --git a/examples/with-flow/.flowconfig b/examples/with-flow/.flowconfig index 4dc0652c71d5..ad16085090cf 100644 --- a/examples/with-flow/.flowconfig +++ b/examples/with-flow/.flowconfig @@ -1,4 +1,5 @@ [ignore] +.*/node_modules/* [include] diff --git a/examples/with-flow/components/layout.js b/examples/with-flow/components/layout.js index e3bbbbe87f9b..99fbfcf96f13 100644 --- a/examples/with-flow/components/layout.js +++ b/examples/with-flow/components/layout.js @@ -1,11 +1,11 @@ // @flow -import type {Element} from 'React' +import * as React from 'react' import Link from 'next/link' import Head from 'next/head' type Props = { - children?: Element, + children?: React.Element, title?: string } diff --git a/examples/with-flow/package.json b/examples/with-flow/package.json index 0eb0341e569a..dc3f9d6cf4af 100644 --- a/examples/with-flow/package.json +++ b/examples/with-flow/package.json @@ -17,6 +17,6 @@ "devDependencies": { "babel-eslint": "^7.1.1", "babel-plugin-transform-flow-strip-types": "^6.21.0", - "flow-bin": "^0.37.4" + "flow-bin": "^0.59.0" } } diff --git a/examples/with-flow/pages/about.js b/examples/with-flow/pages/about.js index d522739b4f35..1ac6f8d136e2 100644 --- a/examples/with-flow/pages/about.js +++ b/examples/with-flow/pages/about.js @@ -1,5 +1,5 @@ // @flow - +import * as React from 'react' import Layout from '../components/layout' export default () => ( diff --git a/examples/with-flow/pages/contact.js b/examples/with-flow/pages/contact.js index 332bbeed81eb..4349ce2b6209 100644 --- a/examples/with-flow/pages/contact.js +++ b/examples/with-flow/pages/contact.js @@ -1,5 +1,5 @@ // @flow - +import * as React from 'react' import Layout from '../components/layout' export default () => ( diff --git a/examples/with-flow/pages/index.js b/examples/with-flow/pages/index.js index f7b2a2f5baf7..eb7cb79d268b 100644 --- a/examples/with-flow/pages/index.js +++ b/examples/with-flow/pages/index.js @@ -1,5 +1,5 @@ // @flow - +import * as React from 'react' import Layout from '../components/layout' export default () => ( diff --git a/examples/with-flow/types/next.js.flow b/examples/with-flow/types/next.js.flow index 2a07bcb95cfe..1c601fedf274 100644 --- a/examples/with-flow/types/next.js.flow +++ b/examples/with-flow/types/next.js.flow @@ -13,15 +13,15 @@ declare module "next" { } declare module "next/head" { - declare module.exports: Class>; + declare module.exports: Class>; } declare module "next/link" { - declare module.exports: Class>; + declare module.exports: Class>; } declare module "next/error" { - declare module.exports: Class>; + declare module.exports: Class>; } declare module "next/router" { @@ -38,10 +38,10 @@ declare module "next/router" { } declare module "next/document" { - declare export var Head: Class>; - declare export var Main: Class>; - declare export var NextScript: Class>; - declare export default Class> & { + declare export var Head: Class>; + declare export var Main: Class>; + declare export var NextScript: Class>; + declare export default Class> & { getInitialProps: (ctx: {pathname: string, query: any, req?: any, res?: any, jsonPageRes?: any, err?: any}) => Promise; renderPage(cb: Function): void; }; From 1c55e7785188289e31d842a6c91b631186c3e405 Mon Sep 17 00:00:00 2001 From: brandon Date: Sun, 3 Dec 2017 18:01:48 -0500 Subject: [PATCH 04/20] doc'd fs-routing option & added note on `passHref` (#3384) 2 changes: `passHref` - just added a cautionary note on the importance of `passHref`. We had a few days of no-href links on our site b/c we used a custom component instead of a raw `` tag, and Google bot wasn't crawling our links (confirmed in Google cache). Hurt our SEO a bit, so I thought it was worth noting. `useFileSystemPublicRoutes` - this is mentioned in https://github.com/zeit/next.js/pull/914 , but it doesn't appear any doc was actually added. We use `next-routes`, and we were serving all the files in `/pages/` in addition to their route patterns (ie duplicate content), which can be a pain w/ SEO and duplicate content. --- readme.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/readme.md b/readme.md index e7ecea64f81a..21966cbfeb56 100644 --- a/readme.md +++ b/readme.md @@ -403,6 +403,8 @@ export default () => If child is an `` tag and doesn't have a href attribute we specify it so that the repetition is not needed by the user. However, sometimes, you’ll want to pass an `` tag inside of a wrapper and the `Link` won’t recognize it as a *hyperlink*, and, consequently, won’t transfer its `href` to the child. In cases like that, you should define a boolean `passHref` property to the `Link`, forcing it to expose its `href` property to the child. +**Please note**: using a tag other than `a` and failing to pass `passHref` may result in links that appear to navigate correctly, but, when being crawled by search engines, will not be recognized as links (owing to the lack of `href` attribute). This may result in negative effects on your sites SEO. + ```jsx import Link from 'next/link' import Unexpected_A from 'third-library' @@ -730,6 +732,21 @@ Supported options: Then, change your `start` script to `NODE_ENV=production node server.js`. +#### Disabling file-system routing +By default, `Next` will serve eacy file in `/pages` under a pathname matching the filename (eg, `/pages/some-file.js` is served at `site.com/some-file`. + +If your project uses custom routing, this behavior may result in the same content being served from multiple paths, which can present problems with SEO and UX. + +To disable this behavior & prevent routing based on files in `/pages`, simply set the following option in your `next.config.js`: + +```js +// next.config.js +module.exports = { + useFileSystemPublicRoutes: false +} +``` + + ### Dynamic Import

From 8f0b7f5b3466426f21251a99352dccb65e17f8d1 Mon Sep 17 00:00:00 2001 From: Kanjie Lu Date: Tue, 5 Dec 2017 00:14:19 +0800 Subject: [PATCH 05/20] fix typo in readme.md (#3385) --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 21966cbfeb56..43dc462a7f7c 100644 --- a/readme.md +++ b/readme.md @@ -733,7 +733,7 @@ Supported options: Then, change your `start` script to `NODE_ENV=production node server.js`. #### Disabling file-system routing -By default, `Next` will serve eacy file in `/pages` under a pathname matching the filename (eg, `/pages/some-file.js` is served at `site.com/some-file`. +By default, `Next` will serve each file in `/pages` under a pathname matching the filename (eg, `/pages/some-file.js` is served at `site.com/some-file`. If your project uses custom routing, this behavior may result in the same content being served from multiple paths, which can present problems with SEO and UX. From 32f9ab31e029705fc366c58c0ca1c794ee72e09a Mon Sep 17 00:00:00 2001 From: Giuseppe Date: Mon, 4 Dec 2017 17:15:30 +0100 Subject: [PATCH 06/20] Upgrade styled-jsx to v2.2.1 (#3358) * Pulled encoding to top of head (#3214) * Remove next.d.ts to use @types/next (#3297) * Add with-mobx-state-tree example (#3179) * Adapt with-mobx example for with-mobx-state-tree * Remove unnecessary lastUpdate parameter to show off snapshot * update readme * make other.js more closely mimic index.js * Upgrade styled-jsx to v2.2.1 Includes some bug fixes. * Fix linting --- examples/with-mobx-state-tree/.babelrc | 8 +++ examples/with-mobx-state-tree/README.md | 59 +++++++++++++++++++ .../with-mobx-state-tree/components/Clock.js | 24 ++++++++ .../with-mobx-state-tree/components/Page.js | 29 +++++++++ examples/with-mobx-state-tree/package.json | 21 +++++++ examples/with-mobx-state-tree/pages/index.js | 26 ++++++++ examples/with-mobx-state-tree/pages/other.js | 26 ++++++++ examples/with-mobx-state-tree/server.js | 21 +++++++ examples/with-mobx-state-tree/store.js | 43 ++++++++++++++ examples/with-typescript/next.d.ts | 10 ---- examples/with-typescript/package.json | 12 ++-- package.json | 2 +- server/document.js | 2 +- 13 files changed, 265 insertions(+), 18 deletions(-) create mode 100644 examples/with-mobx-state-tree/.babelrc create mode 100644 examples/with-mobx-state-tree/README.md create mode 100644 examples/with-mobx-state-tree/components/Clock.js create mode 100644 examples/with-mobx-state-tree/components/Page.js create mode 100644 examples/with-mobx-state-tree/package.json create mode 100644 examples/with-mobx-state-tree/pages/index.js create mode 100644 examples/with-mobx-state-tree/pages/other.js create mode 100644 examples/with-mobx-state-tree/server.js create mode 100644 examples/with-mobx-state-tree/store.js delete mode 100644 examples/with-typescript/next.d.ts diff --git a/examples/with-mobx-state-tree/.babelrc b/examples/with-mobx-state-tree/.babelrc new file mode 100644 index 000000000000..47a96baf4df3 --- /dev/null +++ b/examples/with-mobx-state-tree/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + "transform-decorators-legacy" + ] +} \ No newline at end of file diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md new file mode 100644 index 000000000000..4e15afcac56c --- /dev/null +++ b/examples/with-mobx-state-tree/README.md @@ -0,0 +1,59 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-mobx-state-tree) + +# MobX State Tree 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-mobx +cd with-mobx +``` + +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 +``` +## Notes +This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. Decorator support is activated by adding a `.babelrc` file at the root of the project: + +```json +{ + "presets": [ + "next/babel" + ], + "plugins": [ + "transform-decorators-legacy" + ] +} +``` + +### Rehydrating with server data +After initializing the store (and possibly making changes such as fetching data), `getInitialProps` must stringify the store in order to pass it as props to the client. `mobx-state-tree` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is sent to the client as `props.initialState` where the pages's `constructor()` may use it to rehydrate the client store. + +## The idea behind the example + +Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one. + +In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one. + +![](http://i.imgur.com/JCxtWSj.gif) + +Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the mobx-state-tree store and returning the initial timestamp to be rendered. The root component for the render method is the `mobx-react ` that allows us to send the store down to children components so they can access to the state when required. + +To pass the initial timestamp from the server to the client we pass it as a prop called `lastUpdate` so then it's available when the client takes over. + +The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js` + +The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. + +As far as how this example differs from the `with-mobx` example, `mobx-state-tree` requires that any changes to the observable data are sent as actions, which are defined on the model in `server.js`. The snapshot feature, while not very useful in this particular case, makes client-side rehydration of the state amazingly easy. Any changes that are made to the store in `getInitialProps` will be refreshed instantly when that page is loaded on the client. diff --git a/examples/with-mobx-state-tree/components/Clock.js b/examples/with-mobx-state-tree/components/Clock.js new file mode 100644 index 000000000000..caf2880817ad --- /dev/null +++ b/examples/with-mobx-state-tree/components/Clock.js @@ -0,0 +1,24 @@ +export default (props) => { + return ( +
+ {format(new Date(props.lastUpdate))} + +
+ ) +} + +const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}` + +const pad = n => n < 10 ? `0${n}` : n diff --git a/examples/with-mobx-state-tree/components/Page.js b/examples/with-mobx-state-tree/components/Page.js new file mode 100644 index 000000000000..d31fcf448dc7 --- /dev/null +++ b/examples/with-mobx-state-tree/components/Page.js @@ -0,0 +1,29 @@ +import React from 'react' +import Link from 'next/link' +import { inject, observer } from 'mobx-react' +import Clock from './Clock' + +@inject('store') @observer +class Page extends React.Component { + componentDidMount () { + this.props.store.start() + } + + componentWillUnmount () { + this.props.store.stop() + } + + render () { + return ( + + ) + } +} + +export default Page diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json new file mode 100644 index 000000000000..e596b4390064 --- /dev/null +++ b/examples/with-mobx-state-tree/package.json @@ -0,0 +1,21 @@ +{ + "name": "with-mobx", + "version": "1.0.0", + "scripts": { + "dev": "node server.js", + "build": "next build", + "start": "NODE_ENV=production node server.js" + }, + "dependencies": { + "mobx": "3.3.1", + "mobx-react": "^4.0.4", + "mobx-state-tree": "1.0.1", + "next": "latest", + "react": "^16.0.0", + "react-dom": "^16.0.0" + }, + "license": "ISC", + "devDependencies": { + "babel-plugin-transform-decorators-legacy": "^1.3.4" + } +} diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js new file mode 100644 index 000000000000..d2e24642ec70 --- /dev/null +++ b/examples/with-mobx-state-tree/pages/index.js @@ -0,0 +1,26 @@ +import React from 'react' +import { Provider } from 'mobx-react' +import { getSnapshot } from 'mobx-state-tree' +import { initStore } from '../store' +import Page from '../components/Page' + +export default class Counter extends React.Component { + static getInitialProps ({ req }) { + const isServer = !!req + const store = initStore(isServer) + return { initialState: getSnapshot(store), isServer } + } + + constructor (props) { + super(props) + this.store = initStore(props.isServer, props.initialState) + } + + render () { + return ( + + + + ) + } +} diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js new file mode 100644 index 000000000000..a94d8252d925 --- /dev/null +++ b/examples/with-mobx-state-tree/pages/other.js @@ -0,0 +1,26 @@ +import React from 'react' +import { Provider } from 'mobx-react' +import { getSnapshot } from 'mobx-state-tree' +import { initStore } from '../store' +import Page from '../components/Page' + +export default class Counter extends React.Component { + static getInitialProps ({ req }) { + const isServer = !!req + const store = initStore(isServer) + return { initialState: getSnapshot(store), isServer } + } + + constructor (props) { + super(props) + this.store = initStore(props.isServer, props.initialState) + } + + render () { + return ( + + + + ) + } +} diff --git a/examples/with-mobx-state-tree/server.js b/examples/with-mobx-state-tree/server.js new file mode 100644 index 000000000000..bf641110825c --- /dev/null +++ b/examples/with-mobx-state-tree/server.js @@ -0,0 +1,21 @@ +const port = parseInt(process.env.PORT, 10) || 3000 +const dev = process.env.NODE_ENV !== 'production' + +const { createServer } = require('http') +const { parse } = require('url') +const next = require('next') +const mobxReact = require('mobx-react') +const app = next({ dev }) +const handle = app.getRequestHandler() + +mobxReact.useStaticRendering(true) + +app.prepare().then(() => { + createServer((req, res) => { + const parsedUrl = parse(req.url, true) + handle(req, res, parsedUrl) + }).listen(port, err => { + if (err) throw err + console.log(`> Ready on http://localhost:${port}`) + }) +}) diff --git a/examples/with-mobx-state-tree/store.js b/examples/with-mobx-state-tree/store.js new file mode 100644 index 000000000000..773beb693ba0 --- /dev/null +++ b/examples/with-mobx-state-tree/store.js @@ -0,0 +1,43 @@ +import { types, applySnapshot } from 'mobx-state-tree' + +let store = null + +const Store = types + .model({ + lastUpdate: types.Date, + light: false + }) + .actions((self) => { + let timer + function start () { + timer = setInterval(() => { + // mobx-state-tree doesn't allow anonymous callbacks changing data + // pass off to another action instead + self.update() + }) + } + + function update () { + self.lastUpdate = Date.now() + self.light = true + } + + function stop () { + clearInterval(timer) + } + + return { start, stop, update } + }) + +export function initStore (isServer, snapshot = null) { + if (isServer) { + store = Store.create({ lastUpdate: Date.now() }) + } + if (store === null) { + store = Store.create({ lastUpdate: Date.now() }) + } + if (snapshot) { + applySnapshot(store, snapshot) + } + return store +} diff --git a/examples/with-typescript/next.d.ts b/examples/with-typescript/next.d.ts deleted file mode 100644 index b0a1a7e91454..000000000000 --- a/examples/with-typescript/next.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -declare module 'next/link' { - import { Url } from 'url' - - export default class Link extends React.Component< - { - href: string | Url; - }, - {} - > {} -} diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json index 5806727d93ed..5311bd17a218 100644 --- a/examples/with-typescript/package.json +++ b/examples/with-typescript/package.json @@ -9,14 +9,14 @@ }, "dependencies": { "next": "latest", - "react": "16.1.0", - "react-dom": "16.1.0" + "react": "^16.1.0", + "react-dom": "^16.1.0" }, "devDependencies": { - "@types/node": "8.0.51", - "@types/react": "16.0.22", + "@types/next": "^2.4.5", + "@types/react": "^16.0.22", "concurrently": "^3.5.0", - "tslint": "5.8.0", - "typescript": "2.6.1" + "tslint": "^5.8.0", + "typescript": "^2.6.1" } } diff --git a/package.json b/package.json index 60cb9a22bf8c..206a148d5b03 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "send": "0.16.1", "source-map-support": "0.4.18", "strip-ansi": "4.0.0", - "styled-jsx": "2.1.2", + "styled-jsx": "2.2.1", "touch": "3.1.0", "unfetch": "3.0.0", "url": "0.11.0", diff --git a/server/document.js b/server/document.js index defd001e12df..cfa2aaecc9c8 100644 --- a/server/document.js +++ b/server/document.js @@ -88,11 +88,11 @@ export class Head extends Component { const pagePathname = getPagePathname(pathname, nextExport) return + {(head || []).map((h, i) => React.cloneElement(h, { key: h.key || i }))} {this.getPreloadDynamicChunks()} {this.getPreloadMainLinks()} - {(head || []).map((h, i) => React.cloneElement(h, { key: h.key || i }))} {styles || null} {this.props.children} From e2888b86d2d752d349d21af18ef0a3b01c4759cb Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 09:06:59 -0800 Subject: [PATCH 07/20] =?UTF-8?q?Make=20sure=20import=20that=20doesn?= =?UTF-8?q?=E2=80=99t=20end=20in=20.jsx=20works?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- server/build/loaders/emit-file-loader.js | 2 +- server/build/webpack.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index 024dceb1ef89..69b106dbfc75 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -8,7 +8,7 @@ module.exports = function (content, sourceMap) { const context = query.context || this.options.context const regExp = query.regExp const opts = { context, content, regExp } - const interpolatedName = loaderUtils.interpolateName(this, name, opts) + const interpolatedName = loaderUtils.interpolateName(this, name, opts).replace('.jsx', '.js') const emit = (code, map) => { this.emitFile(interpolatedName, code, map) diff --git a/server/build/webpack.js b/server/build/webpack.js index e4f9c3e72330..c9a2f5321516 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -57,11 +57,11 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // managing pages. if (dev) { for (const p of devPages) { - entries[join('bundles', p)] = [`./${p}?entry`] + entries[join('bundles', p.replace('.jsx', '.js'))] = [`./${p}?entry`] } } else { for (const p of pages) { - entries[join('bundles', p)] = [`./${p}?entry`] + entries[join('bundles', p.replace('.jsx', '.js'))] = [`./${p}?entry`] } } From 8bff9a81b54623469501abd746a7cd3ae0ea6850 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 09:14:05 -0800 Subject: [PATCH 08/20] Move tests --- .../components/world.jsx | 0 .../pages/custom-extension.jsx} | 0 test/integration/basic/test/rendering.js | 5 +++ .../custom-extensions/test/index.test.js | 38 ------------------- 4 files changed, 5 insertions(+), 38 deletions(-) rename test/integration/{custom-extensions => basic}/components/world.jsx (100%) rename test/integration/{custom-extensions/pages/index.jsx => basic/pages/custom-extension.jsx} (100%) delete mode 100644 test/integration/custom-extensions/test/index.test.js diff --git a/test/integration/custom-extensions/components/world.jsx b/test/integration/basic/components/world.jsx similarity index 100% rename from test/integration/custom-extensions/components/world.jsx rename to test/integration/basic/components/world.jsx diff --git a/test/integration/custom-extensions/pages/index.jsx b/test/integration/basic/pages/custom-extension.jsx similarity index 100% rename from test/integration/custom-extensions/pages/index.jsx rename to test/integration/basic/pages/custom-extension.jsx diff --git a/test/integration/basic/test/rendering.js b/test/integration/basic/test/rendering.js index 47391034209c..ed55c881e6a8 100644 --- a/test/integration/basic/test/rendering.js +++ b/test/integration/basic/test/rendering.js @@ -38,6 +38,11 @@ export default function ({ app }, suiteName, render, fetch) { expect(html).not.toContain('') }) + it('should render the page with custom extension', async () => { + const html = await render('/custom-extension') + expect(html).toMatch(/Hello.*World<\/div>/) + }) + test('renders styled jsx', async () => { const $ = await get$('/styled-jsx') const styleId = $('#blue-box').attr('class') diff --git a/test/integration/custom-extensions/test/index.test.js b/test/integration/custom-extensions/test/index.test.js deleted file mode 100644 index 85e7f0b82d5a..000000000000 --- a/test/integration/custom-extensions/test/index.test.js +++ /dev/null @@ -1,38 +0,0 @@ -/* global jasmine, describe, it, expect, beforeAll, afterAll */ - -import { join } from 'path' -import { - nextServer, - nextBuild, - startApp, - stopApp, - renderViaHTTP -} from 'next-test-utils' - -const appDir = join(__dirname, '../') -let appPort -let server -let app -jasmine.DEFAULT_TIMEOUT_INTERVAL = 40000 - -describe('Custom extensions', () => { - beforeAll(async () => { - await nextBuild(appDir) - app = nextServer({ - dir: join(__dirname, '../'), - dev: false, - quiet: true - }) - - server = await startApp(app) - appPort = server.address().port - }) - afterAll(() => stopApp(server)) - - describe('With basic usage', () => { - it('should render the page', async () => { - const html = await renderViaHTTP(appPort, '/') - expect(html).toMatch(/Hello.*World<\/div>/) - }) - }) -}) From 6107c1a4ddc9b566864c69492e65169a50681114 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 14:00:40 -0800 Subject: [PATCH 09/20] Show error when .js and .jsx both exist --- server/build/loaders/emit-file-loader.js | 18 +++++++++++++++--- server/build/webpack.js | 20 +++++++++++++++++++- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index 69b106dbfc75..d3c286b97eb7 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -2,17 +2,29 @@ import loaderUtils from 'loader-utils' module.exports = function (content, sourceMap) { this.cacheable() + const callback = this.async() + const resourcePath = this.resourcePath const query = loaderUtils.getOptions(this) + + if (query.validateFile) { + try { + query.validateFile(resourcePath) + } catch (err) { + callback(err) + return + } + } + const name = query.name || '[hash].[ext]' const context = query.context || this.options.context const regExp = query.regExp const opts = { context, content, regExp } - const interpolatedName = loaderUtils.interpolateName(this, name, opts).replace('.jsx', '.js') - + const interpolateName = query.interpolateName || ((name) => name) + const interpolatedName = interpolateName(loaderUtils.interpolateName(this, name, opts), {name, opts}) const emit = (code, map) => { this.emitFile(interpolatedName, code, map) - this.callback(null, code, map) + callback(null, code, map) } if (query.transform) { diff --git a/server/build/webpack.js b/server/build/webpack.js index c9a2f5321516..abbc6fd2d77d 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -1,6 +1,6 @@ import { resolve, join, sep } from 'path' import { createHash } from 'crypto' -import { realpathSync } from 'fs' +import { realpathSync, existsSync } from 'fs' import webpack from 'webpack' import glob from 'glob-promise' import WriteFilePlugin from 'write-file-webpack-plugin' @@ -215,6 +215,24 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet }, options: { name: 'dist/[path][name].[ext]', + // We need to strip off .jsx on the server. Otherwise require without .jsx doesn't work. + interpolateName: (name) => name.replace('.jsx', '.js'), + validateFile (file) { + const cases = [{from: '.js', to: '.jsx'}, {from: '.jsx', to: '.js'}] + + for (const item of cases) { + const {from, to} = item + if (file.slice(-(from.length)) !== from) { + continue + } + + const filePath = file.slice(0, -(from.length)) + to + + if (existsSync(filePath)) { + throw new Error(`Both ${from} and ${to} file found. Please make sure you only have one of both.`) + } + } + }, // By default, our babel config does not transpile ES2015 module syntax because // webpack knows how to handle them. (That's how it can do tree-shaking) // But Node.js doesn't know how to handle them. So, we have to transpile them here. From 4a3d4a95689b6c7037b6cf75d269940e638489ad Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 14:40:17 -0800 Subject: [PATCH 10/20] =?UTF-8?q?Remove=20.jsx=20when=20importing=20from?= =?UTF-8?q?=20=E2=80=98path.jsx=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- server/build/babel/plugins/transform-jsx-import.js | 14 ++++++++++++++ server/build/webpack.js | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 server/build/babel/plugins/transform-jsx-import.js diff --git a/server/build/babel/plugins/transform-jsx-import.js b/server/build/babel/plugins/transform-jsx-import.js new file mode 100644 index 000000000000..f0c9aff3b37b --- /dev/null +++ b/server/build/babel/plugins/transform-jsx-import.js @@ -0,0 +1,14 @@ +module.exports = function ({types}) { + return { + name: 'transform-jsx-import', + visitor: { + ImportDeclaration (path) { + const value = path.node.source.value + console.log(value) + if (value.slice(-4) === '.jsx') { + path.node.source = types.stringLiteral(value.slice(0, -4)) + } + } + } + } +} diff --git a/server/build/webpack.js b/server/build/webpack.js index abbc6fd2d77d..4a4f5e5f12ed 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -243,7 +243,6 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet } const babelRuntimePath = require.resolve('babel-runtime/package').replace(/[\\/]package\.json$/, '') - const transpiled = babelCore.transform(content, { babelrc: false, sourceMaps: dev ? 'both' : false, @@ -253,6 +252,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // That's why we need to do it here. // See more: https://github.com/zeit/next.js/issues/951 plugins: [ + require.resolve(join(__dirname, './babel/plugins/transform-jsx-import.js')), [require.resolve('babel-plugin-transform-es2015-modules-commonjs')], [ require.resolve('babel-plugin-module-resolver'), From a83d922962ff58cca4be84249dd82f6780180ede Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 15:36:10 -0800 Subject: [PATCH 11/20] Fixes --- ...{transform-jsx-import.js => remove-dotjsx-from-import.js} | 5 +++-- server/build/loaders/emit-file-loader.js | 5 +++-- server/build/webpack.js | 4 ++-- server/resolve.js | 4 ---- test/integration/basic/components/hello-jsx.jsx | 3 +++ test/integration/basic/pages/custom-extension.jsx | 3 ++- test/integration/basic/test/rendering.js | 3 ++- 7 files changed, 15 insertions(+), 12 deletions(-) rename server/build/babel/plugins/{transform-jsx-import.js => remove-dotjsx-from-import.js} (51%) create mode 100644 test/integration/basic/components/hello-jsx.jsx diff --git a/server/build/babel/plugins/transform-jsx-import.js b/server/build/babel/plugins/remove-dotjsx-from-import.js similarity index 51% rename from server/build/babel/plugins/transform-jsx-import.js rename to server/build/babel/plugins/remove-dotjsx-from-import.js index f0c9aff3b37b..b43b61ba099d 100644 --- a/server/build/babel/plugins/transform-jsx-import.js +++ b/server/build/babel/plugins/remove-dotjsx-from-import.js @@ -1,10 +1,11 @@ +// This plugins removes the `.jsx` extension from import statements. Because we transpile .jsx files to .js in .next +// E.g. `import Hello from '../components/hello.jsx'` will become `import Hello from '../components/hello'` module.exports = function ({types}) { return { - name: 'transform-jsx-import', + name: 'remove-dotjsx-from-import', visitor: { ImportDeclaration (path) { const value = path.node.source.value - console.log(value) if (value.slice(-4) === '.jsx') { path.node.source = types.stringLiteral(value.slice(0, -4)) } diff --git a/server/build/loaders/emit-file-loader.js b/server/build/loaders/emit-file-loader.js index d3c286b97eb7..372112f98cc5 100644 --- a/server/build/loaders/emit-file-loader.js +++ b/server/build/loaders/emit-file-loader.js @@ -7,9 +7,10 @@ module.exports = function (content, sourceMap) { const query = loaderUtils.getOptions(this) - if (query.validateFile) { + // Allows you to do checks on the file name. For example it's used to check if there's both a .js and .jsx file. + if (query.validateFileName) { try { - query.validateFile(resourcePath) + query.validateFileName(resourcePath) } catch (err) { callback(err) return diff --git a/server/build/webpack.js b/server/build/webpack.js index 4a4f5e5f12ed..b909de4aac27 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -217,7 +217,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet name: 'dist/[path][name].[ext]', // We need to strip off .jsx on the server. Otherwise require without .jsx doesn't work. interpolateName: (name) => name.replace('.jsx', '.js'), - validateFile (file) { + validateFileName (file) { const cases = [{from: '.js', to: '.jsx'}, {from: '.jsx', to: '.js'}] for (const item of cases) { @@ -252,7 +252,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // That's why we need to do it here. // See more: https://github.com/zeit/next.js/issues/951 plugins: [ - require.resolve(join(__dirname, './babel/plugins/transform-jsx-import.js')), + require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import')), [require.resolve('babel-plugin-transform-es2015-modules-commonjs')], [ require.resolve('babel-plugin-module-resolver'), diff --git a/server/resolve.js b/server/resolve.js index 543dded79112..2e6c2c898156 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,13 +27,11 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] - if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', - i + 'index.jsx', i + 'index.json' ] } @@ -41,8 +39,6 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), - i + '.jsx', - join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] diff --git a/test/integration/basic/components/hello-jsx.jsx b/test/integration/basic/components/hello-jsx.jsx new file mode 100644 index 000000000000..794b5fbe49a7 --- /dev/null +++ b/test/integration/basic/components/hello-jsx.jsx @@ -0,0 +1,3 @@ +export const Hello = () => ( +
hello
+ ) diff --git a/test/integration/basic/pages/custom-extension.jsx b/test/integration/basic/pages/custom-extension.jsx index 95663711ce99..468ba4e2739f 100644 --- a/test/integration/basic/pages/custom-extension.jsx +++ b/test/integration/basic/pages/custom-extension.jsx @@ -1,4 +1,5 @@ import {World} from '../components/world' +import {Hello} from '../component/hello-jsx.jsx' export default () => ( -
Hello
+
) diff --git a/test/integration/basic/test/rendering.js b/test/integration/basic/test/rendering.js index ed55c881e6a8..603f24bca366 100644 --- a/test/integration/basic/test/rendering.js +++ b/test/integration/basic/test/rendering.js @@ -40,7 +40,8 @@ export default function ({ app }, suiteName, render, fetch) { it('should render the page with custom extension', async () => { const html = await render('/custom-extension') - expect(html).toMatch(/Hello.*World<\/div>/) + expect(html).toContain('
Hello
') + expect(html).toContain('
World
') }) test('renders styled jsx', async () => { From 6f76712caa400e6f41a6a32ff80189a95b194cce Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 15:53:13 -0800 Subject: [PATCH 12/20] Get .jsx resolver back --- server/build/webpack.js | 2 +- server/resolve.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/server/build/webpack.js b/server/build/webpack.js index b909de4aac27..69a62cd03909 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -252,7 +252,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // That's why we need to do it here. // See more: https://github.com/zeit/next.js/issues/951 plugins: [ - require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import')), + require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import.js')), [require.resolve('babel-plugin-transform-es2015-modules-commonjs')], [ require.resolve('babel-plugin-module-resolver'), diff --git a/server/resolve.js b/server/resolve.js index 2e6c2c898156..543dded79112 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,11 +27,13 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] + if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', + i + 'index.jsx', i + 'index.json' ] } @@ -39,6 +41,8 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), + i + '.jsx', + join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 69e592e86e53f28d0e1f78009196b76f2f831866 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 16:17:40 -0800 Subject: [PATCH 13/20] Revert "Get .jsx resolver back" This reverts commit 6f76712caa400e6f41a6a32ff80189a95b194cce. --- server/build/webpack.js | 2 +- server/resolve.js | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/server/build/webpack.js b/server/build/webpack.js index 69a62cd03909..b909de4aac27 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -252,7 +252,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // That's why we need to do it here. // See more: https://github.com/zeit/next.js/issues/951 plugins: [ - require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import.js')), + require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import')), [require.resolve('babel-plugin-transform-es2015-modules-commonjs')], [ require.resolve('babel-plugin-module-resolver'), diff --git a/server/resolve.js b/server/resolve.js index 543dded79112..2e6c2c898156 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,13 +27,11 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] - if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', - i + 'index.jsx', i + 'index.json' ] } @@ -41,8 +39,6 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), - i + '.jsx', - join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 60fc77696948774aab0f93be4a086d2d93120ab8 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 16:24:18 -0800 Subject: [PATCH 14/20] Revert "Revert "Get .jsx resolver back"" This reverts commit 69e592e86e53f28d0e1f78009196b76f2f831866. --- server/build/webpack.js | 2 +- server/resolve.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/server/build/webpack.js b/server/build/webpack.js index b909de4aac27..69a62cd03909 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -252,7 +252,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet // That's why we need to do it here. // See more: https://github.com/zeit/next.js/issues/951 plugins: [ - require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import')), + require.resolve(join(__dirname, './babel/plugins/remove-dotjsx-from-import.js')), [require.resolve('babel-plugin-transform-es2015-modules-commonjs')], [ require.resolve('babel-plugin-module-resolver'), diff --git a/server/resolve.js b/server/resolve.js index 2e6c2c898156..543dded79112 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,11 +27,13 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] + if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', + i + 'index.jsx', i + 'index.json' ] } @@ -39,6 +41,8 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), + i + '.jsx', + join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 630cf5a312b029b9f7d7ea5779a9ec5f5e0e6037 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 17:29:44 -0800 Subject: [PATCH 15/20] Add remove .jsx to preset --- server/build/babel/preset.js | 1 + .../basic/components/{hello-jsx.jsx => hello.jsx} | 2 +- test/integration/basic/pages/custom-extension.jsx | 7 ++++--- 3 files changed, 6 insertions(+), 4 deletions(-) rename test/integration/basic/components/{hello-jsx.jsx => hello.jsx} (61%) diff --git a/server/build/babel/preset.js b/server/build/babel/preset.js index b2b5fac4fbeb..6ccebdc941dc 100644 --- a/server/build/babel/preset.js +++ b/server/build/babel/preset.js @@ -46,6 +46,7 @@ module.exports = (context, opts = {}) => ({ require.resolve('babel-preset-react') ], plugins: [ + require.resolve('./plugins/remove-dotjsx-from-import'), require.resolve('babel-plugin-react-require'), require.resolve('./plugins/handle-import'), require.resolve('babel-plugin-transform-object-rest-spread'), diff --git a/test/integration/basic/components/hello-jsx.jsx b/test/integration/basic/components/hello.jsx similarity index 61% rename from test/integration/basic/components/hello-jsx.jsx rename to test/integration/basic/components/hello.jsx index 794b5fbe49a7..ca4066c6bf2e 100644 --- a/test/integration/basic/components/hello-jsx.jsx +++ b/test/integration/basic/components/hello.jsx @@ -1,3 +1,3 @@ export const Hello = () => ( -
hello
+
Hello
) diff --git a/test/integration/basic/pages/custom-extension.jsx b/test/integration/basic/pages/custom-extension.jsx index 468ba4e2739f..09874ab7187b 100644 --- a/test/integration/basic/pages/custom-extension.jsx +++ b/test/integration/basic/pages/custom-extension.jsx @@ -1,5 +1,6 @@ -import {World} from '../components/world' -import {Hello} from '../component/hello-jsx.jsx' +import {World} from '../components/world.jsx' +import {Hello} from '../components/hello.jsx' + export default () => ( -
+
) From 5e3ef1aca134de47657d91485809cd801e13329f Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 17:36:52 -0800 Subject: [PATCH 16/20] Remove jsx resolver --- server/resolve.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/server/resolve.js b/server/resolve.js index 543dded79112..2e6c2c898156 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,13 +27,11 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] - if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', - i + 'index.jsx', i + 'index.json' ] } @@ -41,8 +39,6 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), - i + '.jsx', - join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 8248e5066cff1c7e33dac2e5a88ffe6856e3fc4e Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 18:08:56 -0800 Subject: [PATCH 17/20] Revert "Remove jsx resolver" This reverts commit 5e3ef1aca134de47657d91485809cd801e13329f. --- server/resolve.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/server/resolve.js b/server/resolve.js index 2e6c2c898156..543dded79112 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,11 +27,13 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] + if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', + i + 'index.jsx', i + 'index.json' ] } @@ -39,6 +41,8 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), + i + '.jsx', + join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 2a6d418a227ea4e59874b0374628ef497e527c52 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 4 Dec 2017 18:14:01 -0800 Subject: [PATCH 18/20] Revert "Revert "Remove jsx resolver"" This reverts commit 8248e5066cff1c7e33dac2e5a88ffe6856e3fc4e. --- server/resolve.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/server/resolve.js b/server/resolve.js index 543dded79112..2e6c2c898156 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,13 +27,11 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] - if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', - i + 'index.jsx', i + 'index.json' ] } @@ -41,8 +39,6 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), - i + '.jsx', - join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 87428c97d6124515c9844bfe1307a36f89d0e456 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 5 Dec 2017 07:25:33 -0800 Subject: [PATCH 19/20] Revert "Revert "Revert "Remove jsx resolver""" This reverts commit 2a6d418a227ea4e59874b0374628ef497e527c52. --- server/resolve.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/server/resolve.js b/server/resolve.js index 2e6c2c898156..543dded79112 100644 --- a/server/resolve.js +++ b/server/resolve.js @@ -27,11 +27,13 @@ function getPaths (id) { const i = sep === '/' ? id : id.replace(/\//g, sep) if (i.slice(-3) === '.js') return [i] + if (i.slice(-4) === '.jsx') return [i] if (i.slice(-5) === '.json') return [i] if (i[i.length - 1] === sep) { return [ i + 'index.js', + i + 'index.jsx', i + 'index.json' ] } @@ -39,6 +41,8 @@ function getPaths (id) { return [ i + '.js', join(i, 'index.js'), + i + '.jsx', + join(i, 'index.jsx'), i + '.json', join(i, 'index.json') ] From 86f95bec13ad4d638ac58170e3fbb15334b5bb49 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 5 Dec 2017 07:28:17 -0800 Subject: [PATCH 20/20] Make 1 component not use .jsx --- test/integration/basic/pages/custom-extension.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/integration/basic/pages/custom-extension.jsx b/test/integration/basic/pages/custom-extension.jsx index 09874ab7187b..13d7212b0383 100644 --- a/test/integration/basic/pages/custom-extension.jsx +++ b/test/integration/basic/pages/custom-extension.jsx @@ -1,4 +1,4 @@ -import {World} from '../components/world.jsx' +import {World} from '../components/world' import {Hello} from '../components/hello.jsx' export default () => (