From d9096e6bee7fb913826783e7c002d2462fccbfc2 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 11:33:38 +0100 Subject: [PATCH 01/32] Remove micro example --- examples/api-routes-micro/README.md | 42 -------------------- examples/api-routes-micro/package.json | 17 -------- examples/api-routes-micro/pages/api/posts.js | 14 ------- examples/api-routes-micro/pages/index.js | 18 --------- 4 files changed, 91 deletions(-) delete mode 100644 examples/api-routes-micro/README.md delete mode 100644 examples/api-routes-micro/package.json delete mode 100644 examples/api-routes-micro/pages/api/posts.js delete mode 100644 examples/api-routes-micro/pages/index.js diff --git a/examples/api-routes-micro/README.md b/examples/api-routes-micro/README.md deleted file mode 100644 index 56b1444b9cad7..0000000000000 --- a/examples/api-routes-micro/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# API routes with Micro example - -Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [Micro](https://github.com/zeit/micro), an `http` server for microservices - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/api-routes-micro) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example api-routes-micro api-routes-micro-app -# or -yarn create next-app --example api-routes-micro api-routes-micro-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/api-routes-micro -cd api-routes-micro -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/api-routes-micro/package.json b/examples/api-routes-micro/package.json deleted file mode 100644 index b44bfbc2301b5..0000000000000 --- a/examples/api-routes-micro/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "api-routes-micro", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "isomorphic-unfetch": "3.0.0", - "micro": "9.3.5-canary.1", - "next": "latest", - "react": "^16.8.6", - "react-dom": "^16.8.6" - }, - "license": "ISC" -} diff --git a/examples/api-routes-micro/pages/api/posts.js b/examples/api-routes-micro/pages/api/posts.js deleted file mode 100644 index e4c475198146b..0000000000000 --- a/examples/api-routes-micro/pages/api/posts.js +++ /dev/null @@ -1,14 +0,0 @@ -import micro from 'micro' - -const posts = [ - { - title: 'Next.js is awesome', - }, - { - title: 'API support is really great', - }, -] - -export default micro((req, res) => { - res.status(200).json(posts) -}) diff --git a/examples/api-routes-micro/pages/index.js b/examples/api-routes-micro/pages/index.js deleted file mode 100644 index 2a7b6bccb8bbc..0000000000000 --- a/examples/api-routes-micro/pages/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import fetch from 'isomorphic-unfetch' - -const Index = ({ posts }) => ( - -) - -Index.getInitialProps = async () => { - const response = await fetch('http://localhost:3000/api/posts') - const posts = await response.json() - - return { posts } -} - -export default Index From 4f2c994528bf45a03e345c94df71efa999afc3b8 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 11:35:58 +0100 Subject: [PATCH 02/32] Remove page that uses getInitialProps --- examples/using-router/components/Header.js | 1 - examples/using-router/pages/error.js | 19 ------------------- 2 files changed, 20 deletions(-) delete mode 100644 examples/using-router/pages/error.js diff --git a/examples/using-router/components/Header.js b/examples/using-router/components/Header.js index eec5874a824cb..a8200ca0f4f02 100644 --- a/examples/using-router/components/Header.js +++ b/examples/using-router/components/Header.js @@ -4,7 +4,6 @@ export default () => (
Home About - Error
) diff --git a/examples/using-router/pages/error.js b/examples/using-router/pages/error.js deleted file mode 100644 index d0cf82361d671..0000000000000 --- a/examples/using-router/pages/error.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from 'react' -import Header from '../components/Header' -import Router from 'next/router' - -export default class extends Component { - static getInitialProps() { - console.log(Router.pathname) - return {} - } - - render() { - return ( -
-
-

This should not be rendered via SSR

-
- ) - } -} From 2c2e90db2fbf3c8268c015a207068ad0f0c7f0e5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 11:39:48 +0100 Subject: [PATCH 03/32] Update with-docker example --- examples/with-docker/README.md | 7 ------- examples/with-docker/next.config.js | 11 ----------- examples/with-docker/package.json | 2 +- examples/with-docker/pages/index.js | 15 ++------------- 4 files changed, 3 insertions(+), 32 deletions(-) delete mode 100644 examples/with-docker/next.config.js diff --git a/examples/with-docker/README.md b/examples/with-docker/README.md index ed84d6e16f08a..69957334e9ce2 100644 --- a/examples/with-docker/README.md +++ b/examples/with-docker/README.md @@ -47,14 +47,7 @@ Run the docker image: ```bash docker run --rm -it \ -p 3000:3000 \ - -e "API_URL=https://example.com" \ next-app ``` or use `yarn build-docker-multistage` - -Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) - -```bash -now --docker -e API_URL="https://example.com" -``` diff --git a/examples/with-docker/next.config.js b/examples/with-docker/next.config.js deleted file mode 100644 index 44fadeb6891d4..0000000000000 --- a/examples/with-docker/next.config.js +++ /dev/null @@ -1,11 +0,0 @@ -// next.config.js -module.exports = { - serverRuntimeConfig: { - // Will only be available on the server side - mySecret: 'secret', - }, - publicRuntimeConfig: { - // Will be available on both server and client - API_URL: process.env.API_URL, - }, -} diff --git a/examples/with-docker/package.json b/examples/with-docker/package.json index 5c3b01b4be1c0..b96869eb97eb1 100644 --- a/examples/with-docker/package.json +++ b/examples/with-docker/package.json @@ -7,7 +7,7 @@ "start": "next start", "build-docker": "docker build -t next-app .", "build-docker-multistage": "docker build -t next-app -f ./Dockerfile.multistage .", - "run-docker": "docker run --rm -it -p 3000:3000 -e 'API_URL=https://example.com' next-app" + "run-docker": "docker run --rm -it -p 3000:3000 next-app" }, "dependencies": { "next": "latest", diff --git a/examples/with-docker/pages/index.js b/examples/with-docker/pages/index.js index 7ea7dedc74948..06865d5410945 100644 --- a/examples/with-docker/pages/index.js +++ b/examples/with-docker/pages/index.js @@ -1,16 +1,5 @@ import React from 'react' -import getConfig from 'next/config' -const { publicRuntimeConfig } = getConfig() -const { API_URL } = publicRuntimeConfig - -export default class extends React.Component { - static async getInitialProps() { - // fetch(`${API_URL}/some-path`) - return {} - } - - render() { - return
The API_URL is {API_URL}
- } +export default () => { + return

Hello World!

} From 027dfc92d3c54e3acbee99054e399b0bf855fff3 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 11:46:45 +0100 Subject: [PATCH 04/32] Update dynamic import example --- .../with-dynamic-import/components/hello1.js | 2 +- .../with-dynamic-import/components/hello2.js | 2 +- .../with-dynamic-import/components/hello3.js | 2 +- .../with-dynamic-import/components/hello4.js | 2 +- .../with-dynamic-import/components/hello5.js | 2 +- examples/with-dynamic-import/pages/index.js | 53 +++++++------------ 6 files changed, 25 insertions(+), 38 deletions(-) diff --git a/examples/with-dynamic-import/components/hello1.js b/examples/with-dynamic-import/components/hello1.js index eda2792299ca1..6d39a24d56ef0 100644 --- a/examples/with-dynamic-import/components/hello1.js +++ b/examples/with-dynamic-import/components/hello1.js @@ -1 +1 @@ -export default () =>

Hello World 1 (imported dynamiclly)

+export default () =>

Hello World 1 (imported dynamically)

diff --git a/examples/with-dynamic-import/components/hello2.js b/examples/with-dynamic-import/components/hello2.js index 131ce7880af9e..9dffdc55e5148 100644 --- a/examples/with-dynamic-import/components/hello2.js +++ b/examples/with-dynamic-import/components/hello2.js @@ -1 +1 @@ -export default () =>

Hello World 2 (imported dynamiclly)

+export default () =>

Hello World 2 (imported dynamically)

diff --git a/examples/with-dynamic-import/components/hello3.js b/examples/with-dynamic-import/components/hello3.js index 5bf73c722e80e..d14e6b4002af1 100644 --- a/examples/with-dynamic-import/components/hello3.js +++ b/examples/with-dynamic-import/components/hello3.js @@ -1 +1 @@ -export default () =>

Hello World 3 (imported dynamiclly)

+export default () =>

Hello World 3 (imported dynamically)

diff --git a/examples/with-dynamic-import/components/hello4.js b/examples/with-dynamic-import/components/hello4.js index 7d4b35fc76f50..89f8c49a74b32 100644 --- a/examples/with-dynamic-import/components/hello4.js +++ b/examples/with-dynamic-import/components/hello4.js @@ -1 +1 @@ -export default () =>

Hello World 4 (imported dynamiclly)

+export default () =>

Hello World 4 (imported dynamically)

diff --git a/examples/with-dynamic-import/components/hello5.js b/examples/with-dynamic-import/components/hello5.js index 7b17b107de9a2..d66261cd641e5 100644 --- a/examples/with-dynamic-import/components/hello5.js +++ b/examples/with-dynamic-import/components/hello5.js @@ -1 +1 @@ -export default () =>

Hello World 5 (imported dynamiclly)

+export default () =>

Hello World 5 (imported dynamically)

diff --git a/examples/with-dynamic-import/pages/index.js b/examples/with-dynamic-import/pages/index.js index 25d16585087aa..7ba740a0a5613 100644 --- a/examples/with-dynamic-import/pages/index.js +++ b/examples/with-dynamic-import/pages/index.js @@ -1,39 +1,30 @@ -import React from 'react' -import { useRouter } from 'next/router' +import React, { useState } from 'react' import Header from '../components/Header' import dynamic from 'next/dynamic' -const DynamicComponent1 = dynamic(import('../components/hello1')) +const DynamicComponent1 = dynamic(() => import('../components/hello1')) -const DynamicComponent2WithCustomLoading = dynamic({ - loader: () => import('../components/hello2'), - loading: () =>

Loading caused by client page transition ...

, -}) - -const DynamicComponent3WithNoSSR = dynamic({ - loader: () => import('../components/hello3'), - loading: () =>

Loading ...

, - ssr: false, -}) +const DynamicComponent2WithCustomLoading = dynamic( + () => import('../components/hello2'), + { + loading: () =>

Loading caused by client page transition ...

, + } +) -const DynamicComponent4 = dynamic({ - loader: () => import('../components/hello4'), -}) +const DynamicComponent3WithNoSSR = dynamic( + () => import('../components/hello3'), + { + loading: () =>

Loading ...

, + ssr: false, + } +) -const DynamicComponent5 = dynamic({ - loader: () => import('../components/hello5'), -}) +const DynamicComponent4 = dynamic(() => import('../components/hello4')) -const IndexPage = ({ showMore }) => { - const router = useRouter() - const handleToggle = () => { - if (showMore) { - router.push('/') - return - } +const DynamicComponent5 = dynamic(() => import('../components/hello5')) - router.push('/?showMore=1') - } +const IndexPage = () => { + const [showMore, setShowMore] = useState(false) return (
@@ -53,13 +44,9 @@ const IndexPage = ({ showMore }) => { {/* Load on demand */} {showMore && } - +
) } -IndexPage.getInitialProps = ({ query }) => { - return { showMore: Boolean(query.showMore) } -} - export default IndexPage From 33013e1bb4e88faa6ee953adf81702675f4fd7ff Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 11:49:14 +0100 Subject: [PATCH 05/32] Update Fela example --- examples/with-fela/pages/_app.js | 29 ++++++++--------------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/examples/with-fela/pages/_app.js b/examples/with-fela/pages/_app.js index 5d989250e4757..2bb9f4565091a 100644 --- a/examples/with-fela/pages/_app.js +++ b/examples/with-fela/pages/_app.js @@ -1,24 +1,11 @@ -import App from 'next/app' -import React from 'react' import FelaProvider from '../FelaProvider' -export default class MyApp extends App { - static async getInitialProps({ Component, ctx }) { - let pageProps = {} - - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { pageProps } - } - - render() { - const { Component, pageProps, renderer } = this.props - return ( - - - - ) - } +function MyApp({ Component, pageProps, renderer }) { + return ( + + + + ) } + +export default MyApp From 3d64ac6297e76217937daa70f06fb40cf69b21dd Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 11:52:06 +0100 Subject: [PATCH 06/32] Update Flow example --- examples/with-flow/pages/_app.js | 60 +++++++++++++------------------- 1 file changed, 24 insertions(+), 36 deletions(-) diff --git a/examples/with-flow/pages/_app.js b/examples/with-flow/pages/_app.js index 48b2639a267f1..1da5bacd98a0b 100644 --- a/examples/with-flow/pages/_app.js +++ b/examples/with-flow/pages/_app.js @@ -1,42 +1,30 @@ -import App from 'next/app' import Link from 'next/link' import React from 'react' -export default class MyApp extends App { - static async getInitialProps({ Component, router, ctx }) { - let pageProps = {} +function MyApp({ Component, pageProps }) { + return ( + <> +
+ +
- if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } + - return { pageProps } - } - - render() { - const { Component, pageProps } = this.props - return ( - <> -
- -
- - - -
I`m here to stay
- - ) - } +
I`m here to stay
+ + ) } + +export default MyApp From b0ae9961ba00bfa15335bb52315a8a604079be34 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 12:08:01 +0100 Subject: [PATCH 07/32] Update framer motion example --- .../with-framer-motion/components/Gallery.js | 2 +- .../components/SingleImage.js | 4 +- examples/with-framer-motion/pages/_app.js | 74 ++++++++----------- .../with-framer-motion/pages/image/[id].js | 15 ---- .../with-framer-motion/pages/image/[index].js | 31 ++++++++ 5 files changed, 65 insertions(+), 61 deletions(-) delete mode 100644 examples/with-framer-motion/pages/image/[id].js create mode 100644 examples/with-framer-motion/pages/image/[index].js diff --git a/examples/with-framer-motion/components/Gallery.js b/examples/with-framer-motion/components/Gallery.js index 5bddc222ebd78..b0e2e770d5463 100644 --- a/examples/with-framer-motion/components/Gallery.js +++ b/examples/with-framer-motion/components/Gallery.js @@ -33,7 +33,7 @@ const Thumbnail = ({ id, i }) => ( variants={frameVariants} transition={transition} > - + ( +const SingleImage = ({ index }) => ( <> diff --git a/examples/with-framer-motion/pages/_app.js b/examples/with-framer-motion/pages/_app.js index 826cb4625da84..8f5d0e61dd736 100644 --- a/examples/with-framer-motion/pages/_app.js +++ b/examples/with-framer-motion/pages/_app.js @@ -1,49 +1,37 @@ -import React from 'react' -import App, { Container } from 'next/app' import { AnimatePresence } from 'framer-motion' +import { useRouter } from 'next/router' -export default class MyApp extends App { - /** - * Handle scrolling gracefully, since next/router scrolls to top - * before exit animation is complete. - * - * Note that next/link components should also be using `scroll={false}` - **/ - handleExitComplete() { - if (typeof window !== 'undefined') { - window.scrollTo({ top: 0 }) - } +function handleExitComplete() { + if (typeof window !== 'undefined') { + window.scrollTo({ top: 0 }) } +} - render() { - const { Component, pageProps, router } = this.props - return ( - <> - - - - - - - - ) - } + * { + box-sizing: border-box; + font-family: Helvetica, sans-serif; + font-weight: 900; + color: #222; + } + `} + + + ) } + +export default MyApp diff --git a/examples/with-framer-motion/pages/image/[id].js b/examples/with-framer-motion/pages/image/[id].js deleted file mode 100644 index 0cf01944ec4a7..0000000000000 --- a/examples/with-framer-motion/pages/image/[id].js +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' -import SingleImage from '../../components/SingleImage' - -const Page = ({ id }) => { - return -} - -Page.getInitialProps = ({ query }) => { - const id = Number.parseInt(query.id, 10) - return { - id, - } -} - -export default Page diff --git a/examples/with-framer-motion/pages/image/[index].js b/examples/with-framer-motion/pages/image/[index].js new file mode 100644 index 0000000000000..d997d5f94f40f --- /dev/null +++ b/examples/with-framer-motion/pages/image/[index].js @@ -0,0 +1,31 @@ +import * as React from 'react' +import SingleImage from '../../components/SingleImage' +import { images } from '../../constants' +const Page = ({ index }) => { + return +} + +export async function getStaticProps({ params }) { + const number = Number.parseInt(params.index, 10) + return { + props: { + index: number, + }, + } +} + +export async function getStaticPaths() { + return { + paths: images.map((_id, index) => { + console.log(index) + return { + params: { + index: `${index}`, + }, + } + }), + fallback: false, + } +} + +export default Page From a12527f8378e13a4a36c980f4b39fc25b8611ee0 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 12:57:33 +0100 Subject: [PATCH 08/32] Remove freactal example --- examples/with-freactal/README.md | 52 ------------------------ examples/with-freactal/components/app.js | 30 -------------- examples/with-freactal/githubApi.js | 9 ---- examples/with-freactal/package.json | 17 -------- examples/with-freactal/pages/index.js | 50 ----------------------- examples/with-freactal/provideState.js | 28 ------------- 6 files changed, 186 deletions(-) delete mode 100644 examples/with-freactal/README.md delete mode 100644 examples/with-freactal/components/app.js delete mode 100644 examples/with-freactal/githubApi.js delete mode 100644 examples/with-freactal/package.json delete mode 100644 examples/with-freactal/pages/index.js delete mode 100644 examples/with-freactal/provideState.js diff --git a/examples/with-freactal/README.md b/examples/with-freactal/README.md deleted file mode 100644 index 4b27bfdd0b0d5..0000000000000 --- a/examples/with-freactal/README.md +++ /dev/null @@ -1,52 +0,0 @@ -# Freactal example - -When it comes to state management of the React webapp, Redux is the most popular solution. However it brings lots of boilerplate code and fiddling aroud multiple files when tracing even simplest state change. - -[Freactal](https://github.com/FormidableLabs/freactal) is a state management library that put this disadvantages away. With very little setup code your components' `props` are enhanced with two key ingredients: `state` and `effects`. Another benefit of Freactal is that you don't need to place _state_ at some special place (global store). You can even have multiple state roots and compose them together - just like your components (this is true also for `effects`). - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-freactal) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-freactal with-freactal-app -# or -yarn create next-app --example with-freactal with-freactal-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-freactal -cd with-freactal -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -### example app - -In this example the `index` page renders list of public repos on GitHub for selected username. It fetches list of repos from public gihub api. First page of this list is rendered by SSR. _serverState_ is then hydrated into the `Index` page. Button at the end of the list allows to load next page of repos list from the API on the client. - -![](https://i.imgur.com/JFU0YUt.png) - -For simplicity the last page is not handled. diff --git a/examples/with-freactal/components/app.js b/examples/with-freactal/components/app.js deleted file mode 100644 index e6ddcf895d674..0000000000000 --- a/examples/with-freactal/components/app.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { fetchUserRepos } from '../githubApi' -import provideStateFactory from '../provideState' - -export default Page => { - const App = ({ serverState }) => { - const withState = provideStateFactory(serverState) - const PageWithState = withState(Page) - - return - } - - App.getInitialProps = async () => { - const username = 'arunoda' - const page = 1 - const repos = await fetchUserRepos(username, page) - - return { - serverState: { - githubReposList: { - username, - page, - repos, - }, - }, - } - } - - return App -} diff --git a/examples/with-freactal/githubApi.js b/examples/with-freactal/githubApi.js deleted file mode 100644 index fa7ea08901f24..0000000000000 --- a/examples/with-freactal/githubApi.js +++ /dev/null @@ -1,9 +0,0 @@ -/* global fetch */ -import 'isomorphic-unfetch' - -const API_BASE_URL = 'https://api.github.com' - -export const fetchUserRepos = (username, page = 1) => - fetch(`${API_BASE_URL}/users/${username}/repos?page=${page}`).then(response => - response.json() - ) diff --git a/examples/with-freactal/package.json b/examples/with-freactal/package.json deleted file mode 100644 index 134d0ce9d29e5..0000000000000 --- a/examples/with-freactal/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "with-freactal", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "freactal": "^1.1.1", - "isomorphic-unfetch": "^2.0.0", - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "ISC" -} diff --git a/examples/with-freactal/pages/index.js b/examples/with-freactal/pages/index.js deleted file mode 100644 index 0a55516674415..0000000000000 --- a/examples/with-freactal/pages/index.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' -import { injectState } from 'freactal' -import app from '../components/app' - -const Index = injectState( - ({ state: { ajaxStatus, githubReposList }, effects }) => { - const fetchMore = () => - effects.fetchGithubReposList( - githubReposList.username, - githubReposList.page + 1 - ) - - return ( -
-

{`List of @${githubReposList.username}'s repositories`}

- - - - - - - - - - - - {githubReposList.repos.map(repo => ( - - - - - - - ))} - - - - - -
namewatchersstarsforks
{repo.name}{repo.watchers_count}{repo.stargazers_count}{repo.forks_count}
  - -
-
- ) - } -) - -export default app(Index) diff --git a/examples/with-freactal/provideState.js b/examples/with-freactal/provideState.js deleted file mode 100644 index 5883b0125b6aa..0000000000000 --- a/examples/with-freactal/provideState.js +++ /dev/null @@ -1,28 +0,0 @@ -import { provideState, update } from 'freactal' -import { fetchUserRepos } from './githubApi' - -export default serverState => - provideState({ - initialState: () => ({ - ...serverState, - ajaxStatus: false, - }), - - effects: { - setAjaxLoader: update((state, ajaxStatus) => ({ ajaxStatus })), - - fetchGithubReposList: (effects, username, page) => - effects - .setAjaxLoader(true) - .then(() => fetchUserRepos(username, page)) - .then(repos => effects.setAjaxLoader(false).then(() => repos)) - .then(repos => state => ({ - ...state, - githubReposList: { - username, - page, - repos: state.githubReposList.repos.concat(repos), - }, - })), - }, - }) From 93e57ff6fc2b5f5caeb4fd51f0422a84430a5599 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:00:11 +0100 Subject: [PATCH 09/32] Remove with-higher-order-component --- .../with-higher-order-component/README.md | 43 ------------------- .../components/Nav.js | 16 ------- .../hocs/withLanguages.js | 22 ---------- .../hocs/withUserAgent.js | 20 --------- .../lib/getDisplayName.js | 3 -- .../with-higher-order-component/package.json | 17 -------- .../pages/about.js | 15 ------- .../pages/index.js | 15 ------- 8 files changed, 151 deletions(-) delete mode 100644 examples/with-higher-order-component/README.md delete mode 100644 examples/with-higher-order-component/components/Nav.js delete mode 100644 examples/with-higher-order-component/hocs/withLanguages.js delete mode 100644 examples/with-higher-order-component/hocs/withUserAgent.js delete mode 100644 examples/with-higher-order-component/lib/getDisplayName.js delete mode 100644 examples/with-higher-order-component/package.json delete mode 100644 examples/with-higher-order-component/pages/about.js delete mode 100644 examples/with-higher-order-component/pages/index.js diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md deleted file mode 100644 index f56146bca7cfc..0000000000000 --- a/examples/with-higher-order-component/README.md +++ /dev/null @@ -1,43 +0,0 @@ -# Higher Order Component example - -This example show you how to create Higher Order Component in next.js. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-higher-order-component) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-higher-order-component with-higher-order-component-app -# or -yarn create next-app --example with-higher-order-component with-higher-order-component-app -``` - -### Download manually - -Download the example: - -Install it and run: - -**npm** - -```bash -npm install -npm run dev -``` - -**yarn** - -```bash -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-higher-order-component/components/Nav.js b/examples/with-higher-order-component/components/Nav.js deleted file mode 100644 index 260fa60884e0a..0000000000000 --- a/examples/with-higher-order-component/components/Nav.js +++ /dev/null @@ -1,16 +0,0 @@ -import Link from 'next/link' - -export const Nav = () => ( - -) diff --git a/examples/with-higher-order-component/hocs/withLanguages.js b/examples/with-higher-order-component/hocs/withLanguages.js deleted file mode 100644 index 6807bafa99279..0000000000000 --- a/examples/with-higher-order-component/hocs/withLanguages.js +++ /dev/null @@ -1,22 +0,0 @@ -import accepts from 'accepts' - -import { getDisplayName } from '../lib/getDisplayName' - -export const withLanguages = Page => { - const WithLanguages = props => - - WithLanguages.getInitialProps = async context => { - const languages = context.req - ? accepts(context.req).languages() - : navigator.languages - - return { - ...(Page.getInitialProps ? await Page.getInitialProps(context) : {}), - languages, - } - } - - WithLanguages.displayName = `WithLanguages(${getDisplayName(Page)})` - - return WithLanguages -} diff --git a/examples/with-higher-order-component/hocs/withUserAgent.js b/examples/with-higher-order-component/hocs/withUserAgent.js deleted file mode 100644 index 5655405ffc66a..0000000000000 --- a/examples/with-higher-order-component/hocs/withUserAgent.js +++ /dev/null @@ -1,20 +0,0 @@ -import { getDisplayName } from '../lib/getDisplayName' - -export const withUserAgent = Page => { - const WithUserAgent = props => - - WithUserAgent.getInitialProps = async context => { - const userAgent = context.req - ? context.req.headers['user-agent'] - : navigator.userAgent - - return { - ...(Page.getInitialProps ? await Page.getInitialProps(context) : {}), - userAgent, - } - } - - WithUserAgent.displayName = `WithUserAgent(${getDisplayName(Page)})` - - return WithUserAgent -} diff --git a/examples/with-higher-order-component/lib/getDisplayName.js b/examples/with-higher-order-component/lib/getDisplayName.js deleted file mode 100644 index 4689c4ea95893..0000000000000 --- a/examples/with-higher-order-component/lib/getDisplayName.js +++ /dev/null @@ -1,3 +0,0 @@ -export function getDisplayName(Component) { - return Component.displayName || Component.name || 'Unknown' -} diff --git a/examples/with-higher-order-component/package.json b/examples/with-higher-order-component/package.json deleted file mode 100644 index 23bb25e9607ef..0000000000000 --- a/examples/with-higher-order-component/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "with-higher-order-component", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "accepts": "1.3.4", - "lodash.flowright": "3.5.0", - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "ISC" -} diff --git a/examples/with-higher-order-component/pages/about.js b/examples/with-higher-order-component/pages/about.js deleted file mode 100644 index fc8175326ad66..0000000000000 --- a/examples/with-higher-order-component/pages/about.js +++ /dev/null @@ -1,15 +0,0 @@ -import flowRight from 'lodash.flowright' - -import { Nav } from '../components/Nav' -import { withLanguages } from '../hocs/withLanguages' -import { withUserAgent } from '../hocs/withUserAgent' - -const AboutPage = props => ( -
-
-) - -export default flowRight([withLanguages, withUserAgent])(AboutPage) diff --git a/examples/with-higher-order-component/pages/index.js b/examples/with-higher-order-component/pages/index.js deleted file mode 100644 index 6e64db757511c..0000000000000 --- a/examples/with-higher-order-component/pages/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import flowRight from 'lodash.flowright' - -import { Nav } from '../components/Nav' -import { withLanguages } from '../hocs/withLanguages' -import { withUserAgent } from '../hocs/withUserAgent' - -const IndexPage = props => ( -
-
-) - -export default flowRight([withLanguages, withUserAgent])(IndexPage) From 8941f56d7b6d6d760be8cb5366d7d8a2be931e02 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:02:11 +0100 Subject: [PATCH 10/32] Remove with-immutable-redux-wrapper as it shows avenues to performance issues --- .../with-immutable-redux-wrapper/README.md | 76 ------------------- .../components/AddCount.js | 38 ---------- .../components/Clock.js | 25 ------ .../components/Page.js | 22 ------ .../with-immutable-redux-wrapper/package.json | 21 ----- .../pages/_app.js | 30 -------- .../pages/index.js | 35 --------- .../pages/other.js | 34 --------- .../with-immutable-redux-wrapper/store.js | 58 -------------- 9 files changed, 339 deletions(-) delete mode 100644 examples/with-immutable-redux-wrapper/README.md delete mode 100644 examples/with-immutable-redux-wrapper/components/AddCount.js delete mode 100644 examples/with-immutable-redux-wrapper/components/Clock.js delete mode 100644 examples/with-immutable-redux-wrapper/components/Page.js delete mode 100644 examples/with-immutable-redux-wrapper/package.json delete mode 100644 examples/with-immutable-redux-wrapper/pages/_app.js delete mode 100644 examples/with-immutable-redux-wrapper/pages/index.js delete mode 100644 examples/with-immutable-redux-wrapper/pages/other.js delete mode 100644 examples/with-immutable-redux-wrapper/store.js diff --git a/examples/with-immutable-redux-wrapper/README.md b/examples/with-immutable-redux-wrapper/README.md deleted file mode 100644 index ea68fcfcd7ef1..0000000000000 --- a/examples/with-immutable-redux-wrapper/README.md +++ /dev/null @@ -1,76 +0,0 @@ -# Immutable Redux 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 redux that also works with our universal rendering approach. This is just a way you can do it but it's not the only one. - -> This example and documentation is based on the [with-redux-wrapper](https://github.com/zeit/next.js/tree/master/examples/with-redux-wrapper) example. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-immutable-redux-wrapper) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-immutable-redux-wrapper with-immutable-redux-wrapper-app -# or -yarn create next-app --example with-immutable-redux-wrapper with-immutable-redux-wrapper-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-immutable-redux-wrapper -cd with-immutable-redux-wrapper -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -## Notes - -In the first 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 redux store and dispatching the required actions until we are ready to return the initial state to be rendered. Since the component is wrapped with `next-redux-wrapper`, the component is automatically connected to Redux and wrapped with `react-redux Provider`, that allows us to access redux state immediately and send the store down to children components so they can access to the state when required. - -For safety it is recommended to wrap all pages, no matter if they use Redux or not, so that you should not care about it anymore in all child components. - -`withRedux` function accepts `makeStore` as first argument, all other arguments are internally passed to `react-redux connect()` function. `makeStore` function will receive initialState as one argument and should return a new instance of redux store each time when called, no memoization needed here. See the [full example](https://github.com/kirill-konshin/next-redux-wrapper#usage) in the Next Redux Wrapper repository. And there's another package [next-connect-redux](https://github.com/huzidaha/next-connect-redux) available with similar features. - -To pass the initial state from the server to the client we pass it as a prop called `initialState` so then it's available when the client takes over. - -The trick here for supporting universal redux 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 `connect` function from `react-redux`. In this case Clock is a direct child from the page but it could be deep down the render tree. - -The second example, under `components/AddCount.js`, shows a simple add counter function with a class component implementing a common redux pattern of mapping state and props. Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render second, when you navigate between pages. - -For simplicity and readability, Reducers, Actions, and Store creators are all in the same file: `store.js` - -## What changed with immutable-redux-wrapper - -Immutability can bring increased performance to your app, and leads to simpler programming and debugging, as data that never changes is easier to reason about than data that is free to be changed arbitrarily throughout your app. - -In fact, Redux requires your state to be immutable. You do not have to use Immutable.JS as regular JavaScript, when written correctly, is perfectly capable of providing immutability on its own. However, guaranteeing immutability with JavaScript is difficult, and it can be easy to mutate an object accidentally, causing both bugs in your app that are extremely difficult to locate. For this reason, using an immutable update library such as Immutable.JS can significantly improve the reliability of your app and make your app's development much easier. - -[Read more](https://redux.js.org/faq/immutable-data#what-approaches-are-there-for-handling-data-immutability-do-i-have-to-use-immutable-js) about the importance of immutability in Redux here. - -This example wraps the exiting with-redux-wrapper example in Immutable.JS and displays how to pass immutable data from state to components. diff --git a/examples/with-immutable-redux-wrapper/components/AddCount.js b/examples/with-immutable-redux-wrapper/components/AddCount.js deleted file mode 100644 index d634a028da267..0000000000000 --- a/examples/with-immutable-redux-wrapper/components/AddCount.js +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-disable */ -import React, { Component } from 'react' -import { connect } from 'react-redux' -import { bindActionCreators } from 'redux' -import { addCount } from '../store' - -class AddCount extends Component { - add = () => { - this.props.addCount() - } - - render() { - const { count } = this.props - return ( -
- -

- AddCount: {count} -

- -
- ) - } -} - -const mapStateToProps = state => ({ count: state.get('count') }) - -const mapDispatchToProps = dispatch => { - return { - addCount: bindActionCreators(addCount, dispatch), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(AddCount) diff --git a/examples/with-immutable-redux-wrapper/components/Clock.js b/examples/with-immutable-redux-wrapper/components/Clock.js deleted file mode 100644 index 9fb286e174819..0000000000000 --- a/examples/with-immutable-redux-wrapper/components/Clock.js +++ /dev/null @@ -1,25 +0,0 @@ -export default ({ lastUpdate, light }) => { - return ( -
- {format(new Date(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-immutable-redux-wrapper/components/Page.js b/examples/with-immutable-redux-wrapper/components/Page.js deleted file mode 100644 index 800a0c081c73e..0000000000000 --- a/examples/with-immutable-redux-wrapper/components/Page.js +++ /dev/null @@ -1,22 +0,0 @@ -import Link from 'next/link' -import { connect } from 'react-redux' -import Clock from './Clock' -import AddCount from './AddCount' - -export default connect(state => ({ - lastUpdate: state.get('lastUpdate'), - light: state.get('light'), -}))(({ title, linkTo, lastUpdate, light }) => { - return ( -
-

{title}

- - - -
- ) -}) diff --git a/examples/with-immutable-redux-wrapper/package.json b/examples/with-immutable-redux-wrapper/package.json deleted file mode 100644 index 0077829e4eba7..0000000000000 --- a/examples/with-immutable-redux-wrapper/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "with-redux-wrapper", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "immutable": "4.0.0-rc.9", - "next": "latest", - "next-redux-wrapper": "4.0.1", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "react-redux": "^5.0.1", - "redux": "^3.6.0", - "redux-devtools-extension": "^2.13.2", - "redux-thunk": "^2.1.0" - }, - "license": "ISC" -} diff --git a/examples/with-immutable-redux-wrapper/pages/_app.js b/examples/with-immutable-redux-wrapper/pages/_app.js deleted file mode 100644 index b82094c598ea1..0000000000000 --- a/examples/with-immutable-redux-wrapper/pages/_app.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { Provider } from 'react-redux' -import App from 'next/app' -import withRedux from 'next-redux-wrapper' -import { makeStore } from '../store' -import { fromJS } from 'immutable' - -class MyApp extends App { - static async getInitialProps({ Component, ctx }) { - const pageProps = Component.getInitialProps - ? await Component.getInitialProps(ctx) - : {} - - return { pageProps } - } - - render() { - const { Component, pageProps, store } = this.props - return ( - - - - ) - } -} - -export default withRedux(makeStore, { - serializeState: state => state.toJS(), - deserializeState: state => fromJS(state), -})(MyApp) diff --git a/examples/with-immutable-redux-wrapper/pages/index.js b/examples/with-immutable-redux-wrapper/pages/index.js deleted file mode 100644 index 2f73c36b06f2d..0000000000000 --- a/examples/with-immutable-redux-wrapper/pages/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { bindActionCreators } from 'redux' -import { startClock, addCount, serverRenderClock } from '../store' -import Page from '../components/Page' -import { connect } from 'react-redux' - -class Counter extends React.Component { - static getInitialProps({ store, isServer }) { - store.dispatch(serverRenderClock(isServer)) - store.dispatch(addCount()) - - return { isServer } - } - - componentDidMount() { - this.timer = this.props.startClock() - } - - componentWillUnmount() { - clearInterval(this.timer) - } - - render() { - return - } -} - -const mapDispatchToProps = dispatch => { - return { - addCount: bindActionCreators(addCount, dispatch), - startClock: bindActionCreators(startClock, dispatch), - } -} - -export default connect(null, mapDispatchToProps)(Counter) diff --git a/examples/with-immutable-redux-wrapper/pages/other.js b/examples/with-immutable-redux-wrapper/pages/other.js deleted file mode 100644 index 583a27dfa391c..0000000000000 --- a/examples/with-immutable-redux-wrapper/pages/other.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import { bindActionCreators } from 'redux' -import { startClock, addCount, serverRenderClock } from '../store' -import Page from '../components/Page' -import { connect } from 'react-redux' - -class Counter extends React.Component { - static getInitialProps({ store, isServer }) { - store.dispatch(serverRenderClock(isServer)) - store.dispatch(addCount()) - return { isServer } - } - - componentDidMount() { - this.timer = this.props.startClock() - } - - componentWillUnmount() { - clearInterval(this.timer) - } - - render() { - return - } -} - -const mapDispatchToProps = dispatch => { - return { - addCount: bindActionCreators(addCount, dispatch), - startClock: bindActionCreators(startClock, dispatch), - } -} - -export default connect(null, mapDispatchToProps)(Counter) diff --git a/examples/with-immutable-redux-wrapper/store.js b/examples/with-immutable-redux-wrapper/store.js deleted file mode 100644 index 7d2b93b60e876..0000000000000 --- a/examples/with-immutable-redux-wrapper/store.js +++ /dev/null @@ -1,58 +0,0 @@ -import { createStore, applyMiddleware } from 'redux' -import { composeWithDevTools } from 'redux-devtools-extension' -import thunkMiddleware from 'redux-thunk' -import { fromJS } from 'immutable' - -const exampleInitialState = fromJS({ - lastUpdate: 0, - light: false, - count: 0, -}) - -export const actionTypes = { - ADD: 'ADD', - TICK: 'TICK', -} - -// REDUCERS -export const reducer = (state = exampleInitialState, action) => { - switch (action.type) { - case actionTypes.TICK: - return state.merge({ - lastUpdate: action.ts, - light: !!action.light, - }) - - case actionTypes.ADD: - return state.merge({ - count: state.get('count') + 1, - }) - - default: - return state - } -} - -// ACTIONS -export const serverRenderClock = isServer => dispatch => { - return dispatch({ type: actionTypes.TICK, light: !isServer, ts: Date.now() }) -} - -export const startClock = () => dispatch => { - return setInterval( - () => dispatch({ type: actionTypes.TICK, light: true, ts: Date.now() }), - 1000 - ) -} - -export const addCount = () => dispatch => { - return dispatch({ type: actionTypes.ADD }) -} - -export const makeStore = (initialState = exampleInitialState) => { - return createStore( - reducer, - initialState, - composeWithDevTools(applyMiddleware(thunkMiddleware)) - ) -} From 519d337a4d564b82941e4583a8abf2f3242421af Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:03:19 +0100 Subject: [PATCH 11/32] Remove example that doesn't have usage --- examples/with-ioc/.babelrc | 16 ---- examples/with-ioc/README.md | 40 -------- .../blog.page_with_provide.test.js.snap | 91 ------------------- ...ndpoint.component_with_inject.test.js.snap | 34 ------- .../index.page_without_provide.test.js.snap | 44 --------- .../__tests__/blog.page_with_provide.test.js | 35 ------- .../endpoint.component_with_inject.test.js | 48 ---------- .../index.page_without_provide.test.js | 31 ------- examples/with-ioc/components/component1.js | 12 --- examples/with-ioc/components/component2.js | 14 --- examples/with-ioc/components/endbutton.js | 31 ------- examples/with-ioc/components/endpoint.js | 39 -------- examples/with-ioc/jest.config.js | 4 - examples/with-ioc/jest.setup.js | 4 - examples/with-ioc/package.json | 26 ------ examples/with-ioc/pages/about.js | 3 - examples/with-ioc/pages/blog.js | 41 --------- examples/with-ioc/pages/index.js | 31 ------- examples/with-ioc/routes.js | 5 - examples/with-ioc/server.js | 15 --- 20 files changed, 564 deletions(-) delete mode 100644 examples/with-ioc/.babelrc delete mode 100644 examples/with-ioc/README.md delete mode 100644 examples/with-ioc/__tests__/__snapshots__/blog.page_with_provide.test.js.snap delete mode 100644 examples/with-ioc/__tests__/__snapshots__/endpoint.component_with_inject.test.js.snap delete mode 100644 examples/with-ioc/__tests__/__snapshots__/index.page_without_provide.test.js.snap delete mode 100644 examples/with-ioc/__tests__/blog.page_with_provide.test.js delete mode 100644 examples/with-ioc/__tests__/endpoint.component_with_inject.test.js delete mode 100644 examples/with-ioc/__tests__/index.page_without_provide.test.js delete mode 100644 examples/with-ioc/components/component1.js delete mode 100644 examples/with-ioc/components/component2.js delete mode 100644 examples/with-ioc/components/endbutton.js delete mode 100644 examples/with-ioc/components/endpoint.js delete mode 100644 examples/with-ioc/jest.config.js delete mode 100644 examples/with-ioc/jest.setup.js delete mode 100644 examples/with-ioc/package.json delete mode 100644 examples/with-ioc/pages/about.js delete mode 100644 examples/with-ioc/pages/blog.js delete mode 100644 examples/with-ioc/pages/index.js delete mode 100644 examples/with-ioc/routes.js delete mode 100644 examples/with-ioc/server.js diff --git a/examples/with-ioc/.babelrc b/examples/with-ioc/.babelrc deleted file mode 100644 index 6b6d0128368fd..0000000000000 --- a/examples/with-ioc/.babelrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "env": { - "development": { - "presets": ["next/babel"], - "plugins": ["transform-decorators-legacy"] - }, - "production": { - "presets": ["next/babel"], - "plugins": ["transform-decorators-legacy"] - }, - "test": { - "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]], - "plugins": ["transform-decorators-legacy"] - } - } -} diff --git a/examples/with-ioc/README.md b/examples/with-ioc/README.md deleted file mode 100644 index 7bd2590d4de35..0000000000000 --- a/examples/with-ioc/README.md +++ /dev/null @@ -1,40 +0,0 @@ -# Dependency Injection (IoC) example ([ioc](https://github.com/alexindigo/ioc)) - -This example uses [ioc](https://github.com/alexindigo/ioc) for dependency injection, which lets you create decoupled shared components and keep them free from implementation details of your app / other components. - -It builds on top of [with-next-routes](https://github.com/zeit/next.js/tree/master/examples/with-next-routes) example and makes use of dependency injection to propagate custom `Link` component to other components. - -Also, it illustrates ergonomics of testing using dependency injection. - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-ioc with-ioc-app -# or -yarn create next-app --example with-ioc with-ioc-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ioc -cd with-ioc -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-ioc/__tests__/__snapshots__/blog.page_with_provide.test.js.snap b/examples/with-ioc/__tests__/__snapshots__/blog.page_with_provide.test.js.snap deleted file mode 100644 index 389b7f1df1d51..0000000000000 --- a/examples/with-ioc/__tests__/__snapshots__/blog.page_with_provide.test.js.snap +++ /dev/null @@ -1,91 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`With Snapshot Testing Blog renders components 1`] = ` -
-

- Hi There! -

-
-

- Component1 -

- Knows nothing about any custom \`Link\` or \`Router\` components or prop -
-

- Component2 -

- Knows nothing about any custom \`Link\` or \`Router\` components or prop -
-

- Endpoint -

- Uses injected \`Link\` component without direct dependency on one -
- - About: foo baz - -
- - go Home - -
-
-

- EndButton -

- Uses injected \`Router\` component without direct dependency on one -
- -
- -
-
-
-
-`; diff --git a/examples/with-ioc/__tests__/__snapshots__/endpoint.component_with_inject.test.js.snap b/examples/with-ioc/__tests__/__snapshots__/endpoint.component_with_inject.test.js.snap deleted file mode 100644 index 8af42d7db6761..0000000000000 --- a/examples/with-ioc/__tests__/__snapshots__/endpoint.component_with_inject.test.js.snap +++ /dev/null @@ -1,34 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`With Snapshot Testing Blog renders components 1`] = ` -
-

- Endpoint -

- Uses injected \`Link\` component without direct dependency on one -
- -
- -
-`; diff --git a/examples/with-ioc/__tests__/__snapshots__/index.page_without_provide.test.js.snap b/examples/with-ioc/__tests__/__snapshots__/index.page_without_provide.test.js.snap deleted file mode 100644 index e198c13b2e9dd..0000000000000 --- a/examples/with-ioc/__tests__/__snapshots__/index.page_without_provide.test.js.snap +++ /dev/null @@ -1,44 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`With Snapshot Testing App shows "Menu" 1`] = ` - -`; diff --git a/examples/with-ioc/__tests__/blog.page_with_provide.test.js b/examples/with-ioc/__tests__/blog.page_with_provide.test.js deleted file mode 100644 index 2bccaa4f2bfea..0000000000000 --- a/examples/with-ioc/__tests__/blog.page_with_provide.test.js +++ /dev/null @@ -1,35 +0,0 @@ -/* eslint-env jest */ - -/* - * Testing pages with @provide decorator: - * - * Snapshots – as usual - * - * Shallow rendering – need to `.dive()` one level deep, - * as with any High Order Component. - * Also `.html()` may cause havoc when it'd try to expand the render - * but won't inject context since top level co,ponent has been rendered already. - * This problem is not unique to IoC though, anything that relies on context (i.e. Redux) - * is facing the same issue. Use `.debug()` or `mount()` instead - */ - -import { shallow } from 'enzyme' -import React from 'react' -import renderer from 'react-test-renderer' - -import App from '../pages/blog.js' - -describe('With Enzyme', () => { - it('Blog renders components', () => { - const app = shallow().dive() - expect(app.find('h1').text()).toEqual('Hi There!') - }) -}) - -describe('With Snapshot Testing', () => { - it('Blog renders components', () => { - const component = renderer.create() - const tree = component.toJSON() - expect(tree).toMatchSnapshot() - }) -}) diff --git a/examples/with-ioc/__tests__/endpoint.component_with_inject.test.js b/examples/with-ioc/__tests__/endpoint.component_with_inject.test.js deleted file mode 100644 index 1c33af1eb0b06..0000000000000 --- a/examples/with-ioc/__tests__/endpoint.component_with_inject.test.js +++ /dev/null @@ -1,48 +0,0 @@ -/* eslint-env jest */ - -/* - * Individual component testing is pretty simple - * just provide your dependencies as props - * and add `.dive()` step to your shallow render, - * as with any High Order Component. - * - * Remarks about `.html()` may apply, - * depending if any of the children components - * expect anything from the context - */ - -import { shallow } from 'enzyme' -import React from 'react' -import renderer from 'react-test-renderer' - -import Component from '../components/endpoint.js' - -describe('With Enzyme', () => { - it('Component renders with props', () => { - // no need to mock Link component much for shallow rendering - const injected = shallow( {}} />) - const component = injected.dive() - expect(component.find('h3').text()).toEqual('Endpoint') - expect( - component - .find('Link') - .first() - .find('a') - .text() - ).toEqual('About: foo baz') - }) -}) - -describe('With Snapshot Testing', () => { - it('Blog renders components', () => { - const component = renderer.create( - ( -
{props.children}
- )} - /> - ) - const tree = component.toJSON() - expect(tree).toMatchSnapshot() - }) -}) diff --git a/examples/with-ioc/__tests__/index.page_without_provide.test.js b/examples/with-ioc/__tests__/index.page_without_provide.test.js deleted file mode 100644 index 2a124a8d2a1a1..0000000000000 --- a/examples/with-ioc/__tests__/index.page_without_provide.test.js +++ /dev/null @@ -1,31 +0,0 @@ -/* eslint-env jest */ - -/* - * Testing pages without @provide decorator as usual - */ - -import { shallow } from 'enzyme' -import React from 'react' -import renderer from 'react-test-renderer' - -import App from '../pages/index.js' - -describe('With Enzyme', () => { - it('App shows "Menu"', () => { - const app = shallow() - expect( - app - .find('li a') - .first() - .text() - ).toEqual('Blog: Hello world') - }) -}) - -describe('With Snapshot Testing', () => { - it('App shows "Menu"', () => { - const component = renderer.create() - const tree = component.toJSON() - expect(tree).toMatchSnapshot() - }) -}) diff --git a/examples/with-ioc/components/component1.js b/examples/with-ioc/components/component1.js deleted file mode 100644 index aef65c6686600..0000000000000 --- a/examples/with-ioc/components/component1.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import Component2 from './component2' - -export default () => ( -
-

Component1

- Knows nothing about any custom `Link` or `Router` components or prop - -
-) diff --git a/examples/with-ioc/components/component2.js b/examples/with-ioc/components/component2.js deleted file mode 100644 index bdfdd402799f4..0000000000000 --- a/examples/with-ioc/components/component2.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import Endpoint from './endpoint' -import EndButton from './endbutton' - -export default () => ( -
-

Component2

- Knows nothing about any custom `Link` or `Router` components or prop - - -
-) diff --git a/examples/with-ioc/components/endbutton.js b/examples/with-ioc/components/endbutton.js deleted file mode 100644 index c9f0bcdae901f..0000000000000 --- a/examples/with-ioc/components/endbutton.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import { inject } from 'ioc' -import PropTypes from 'prop-types' - -@inject({ - Router: PropTypes.object, -}) -export default class extends React.Component { - render() { - const { Router } = this.props - - return ( -
-

EndButton

- Uses injected `Router` component without direct dependency on one -
- -
- -
- ) - } -} diff --git a/examples/with-ioc/components/endpoint.js b/examples/with-ioc/components/endpoint.js deleted file mode 100644 index 5e37fd8252c34..0000000000000 --- a/examples/with-ioc/components/endpoint.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import { inject } from 'ioc' -import PropTypes from 'prop-types' - -@inject({ - // keep it `isRequired`-free to allow mock injection via props - Link: PropTypes.func, -}) -export default class extends React.Component { - static propTypes = { - // you can add `isRequired` to the component's propTypes definition - Link: PropTypes.func.isRequired, - } - - render() { - const { Link } = this.props - - return ( -
-

Endpoint

- Uses injected `Link` component without direct dependency on one -
- - About: foo baz - -
- - go Home - -
- ) - } -} diff --git a/examples/with-ioc/jest.config.js b/examples/with-ioc/jest.config.js deleted file mode 100644 index 50636149295f6..0000000000000 --- a/examples/with-ioc/jest.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - setupFiles: ['/jest.setup.js'], - testPathIgnorePatterns: ['/.next/', '/node_modules/'], -} diff --git a/examples/with-ioc/jest.setup.js b/examples/with-ioc/jest.setup.js deleted file mode 100644 index 3d6cd1d53a114..0000000000000 --- a/examples/with-ioc/jest.setup.js +++ /dev/null @@ -1,4 +0,0 @@ -import { configure } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' - -configure({ adapter: new Adapter() }) diff --git a/examples/with-ioc/package.json b/examples/with-ioc/package.json deleted file mode 100644 index dad80fb179eda..0000000000000 --- a/examples/with-ioc/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "with-ioc", - "version": "1.0.0", - "license": "MIT", - "scripts": { - "test": "NODE_ENV=test jest", - "dev": "node server.js", - "build": "next build", - "start": "NODE_ENV=production node server.js" - }, - "dependencies": { - "ioc": "1.0.3", - "next": "latest", - "next-routes": "^1.0.17", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "devDependencies": { - "babel-plugin-transform-decorators-legacy": "1.3.4", - "enzyme": "3.3.0", - "enzyme-adapter-react-16": "1.1.1", - "jest": "22.1.3", - "react-addons-test-utils": "15.6.2", - "react-test-renderer": "16.2.0" - } -} diff --git a/examples/with-ioc/pages/about.js b/examples/with-ioc/pages/about.js deleted file mode 100644 index f58da8ac990c0..0000000000000 --- a/examples/with-ioc/pages/about.js +++ /dev/null @@ -1,3 +0,0 @@ -export default props => ( -

About foo – no `Link` ({typeof props.Link}) available here

-) diff --git a/examples/with-ioc/pages/blog.js b/examples/with-ioc/pages/blog.js deleted file mode 100644 index 6bb580a77a51d..0000000000000 --- a/examples/with-ioc/pages/blog.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' -import { provide, types } from 'ioc' -import { Link, Router } from '../routes' -import Component1 from '../components/component1' - -const posts = [ - { slug: 'hello-world', title: 'Hello world' }, - { slug: 'another-blog-post', title: 'Another blog post' }, -] - -@provide({ - @types.func.isRequired - Link, - - @types.object - Router, -}) -export default class extends React.Component { - static async getInitialProps({ query, res }) { - const post = posts.find(post => post.slug === query.slug) - - if (!post && res) { - res.statusCode = 404 - } - - return { post } - } - - render() { - const { post } = this.props - - if (!post) return

Post not found

- - return ( -
-

{post.title}

- -
- ) - } -} diff --git a/examples/with-ioc/pages/index.js b/examples/with-ioc/pages/index.js deleted file mode 100644 index d00add8845c98..0000000000000 --- a/examples/with-ioc/pages/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Link, Router } from '../routes' - -export default () => ( - -) diff --git a/examples/with-ioc/routes.js b/examples/with-ioc/routes.js deleted file mode 100644 index 41ea20d1ba823..0000000000000 --- a/examples/with-ioc/routes.js +++ /dev/null @@ -1,5 +0,0 @@ -const nextRoutes = require('next-routes') -const routes = (module.exports = nextRoutes()) - -routes.add('blog', '/blog/:slug') -routes.add('about', '/about-us/:foo(bar|baz)') diff --git a/examples/with-ioc/server.js b/examples/with-ioc/server.js deleted file mode 100644 index 9cd10606b1fdb..0000000000000 --- a/examples/with-ioc/server.js +++ /dev/null @@ -1,15 +0,0 @@ -const { createServer } = require('http') -const next = require('next') -const routes = require('./routes') - -const port = parseInt(process.env.PORT, 10) || 3000 -const dev = process.env.NODE_ENV !== 'production' -const app = next({ dev }) -const handler = routes.getRequestHandler(app) - -app.prepare().then(() => { - createServer(handler).listen(port, err => { - if (err) throw err - console.log(`> Ready on http://localhost:${port}`) - }) -}) From 62cabbcdfc1d1090f7a508c4bee82402f8a65a09 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:06:34 +0100 Subject: [PATCH 12/32] Update with-kea --- examples/with-kea/.babelrc | 8 -------- examples/with-kea/pages/_app.js | 28 ++++++++++------------------ 2 files changed, 10 insertions(+), 26 deletions(-) delete mode 100644 examples/with-kea/.babelrc diff --git a/examples/with-kea/.babelrc b/examples/with-kea/.babelrc deleted file mode 100644 index 8a6b29925cab7..0000000000000 --- a/examples/with-kea/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "next/babel" - ], - "plugins": [ - ["@babel/plugin-proposal-decorators", { "legacy": true }] - ] -} diff --git a/examples/with-kea/pages/_app.js b/examples/with-kea/pages/_app.js index 5c80d4e015abb..f842a4e7d1341 100644 --- a/examples/with-kea/pages/_app.js +++ b/examples/with-kea/pages/_app.js @@ -1,24 +1,16 @@ import React from 'react' import { Provider } from 'react-redux' -import App from 'next/app' import withRedux from 'next-redux-wrapper' import { initStore } from '../store' -@withRedux(initStore, { debug: process.env.NODE_ENV === 'development' }) -export default class MyApp extends App { - static async getInitialProps({ Component, ctx }) { - const pageProps = Component.getInitialProps - ? await Component.getInitialProps(ctx) - : {} - return { pageProps } - } - - render() { - const { Component, pageProps, store } = this.props - return ( - - - - ) - } +function MyApp({ Component, pageProps, store }) { + return ( + + + + ) } + +export default withRedux(initStore, { + debug: process.env.NODE_ENV === 'development', +})(MyApp) From fa81a65049e95ceae016494f1f2e5ae12dd3bff9 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:09:28 +0100 Subject: [PATCH 13/32] Remove example that is not used --- .../with-mobx-keystone-typescript/.babelrc | 4 - .../with-mobx-keystone-typescript/README.md | 108 ------------------ .../components/Clock.tsx | 22 ---- .../components/Sample.tsx | 34 ------ .../next-env.d.ts | 2 - .../package.json | 25 ---- .../pages/_app.tsx | 30 ----- .../pages/index.tsx | 10 -- .../pages/other.tsx | 10 -- .../store/index.tsx | 57 --------- .../store/root.ts | 35 ------ .../tsconfig.json | 21 ---- 12 files changed, 358 deletions(-) delete mode 100644 examples/with-mobx-keystone-typescript/.babelrc delete mode 100644 examples/with-mobx-keystone-typescript/README.md delete mode 100644 examples/with-mobx-keystone-typescript/components/Clock.tsx delete mode 100644 examples/with-mobx-keystone-typescript/components/Sample.tsx delete mode 100644 examples/with-mobx-keystone-typescript/next-env.d.ts delete mode 100644 examples/with-mobx-keystone-typescript/package.json delete mode 100644 examples/with-mobx-keystone-typescript/pages/_app.tsx delete mode 100644 examples/with-mobx-keystone-typescript/pages/index.tsx delete mode 100644 examples/with-mobx-keystone-typescript/pages/other.tsx delete mode 100644 examples/with-mobx-keystone-typescript/store/index.tsx delete mode 100644 examples/with-mobx-keystone-typescript/store/root.ts delete mode 100644 examples/with-mobx-keystone-typescript/tsconfig.json diff --git a/examples/with-mobx-keystone-typescript/.babelrc b/examples/with-mobx-keystone-typescript/.babelrc deleted file mode 100644 index 1bbd4ca8f2cd9..0000000000000 --- a/examples/with-mobx-keystone-typescript/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] -} diff --git a/examples/with-mobx-keystone-typescript/README.md b/examples/with-mobx-keystone-typescript/README.md deleted file mode 100644 index 780048de3dbb2..0000000000000 --- a/examples/with-mobx-keystone-typescript/README.md +++ /dev/null @@ -1,108 +0,0 @@ -# mobx-keystone 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. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-mobx-keystone-typescript) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app -# or -yarn create next-app --example with-mobx-keystone-typescript with-mobx-keystone-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/canary | tar -xz --strip=2 next.js-canary/examples/with-mobx-keystone-typescript -cd with-mobx-keystone-typescript -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -## Notes - -This example is a typescript and mobx-keysone port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. MobX support has been implemented using React Hooks. Decorator support is activated by adding a `.babelrc` file at the root of the project: - -```json -{ - "presets": ["next/babel"], - "plugins": ["transform-decorators-legacy"] -} -``` - -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.tsx` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the `mobx-keystone` store and returning the initial timestamp to be rendered. The root component for the render method is a React context provider 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. - -## Implementation - -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.ts` - -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-keystone` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is passed down to `StoreProvider` via `snapshot` prop where it's used to rehydrate `RootStore` and provide context with `StoreContext` - -```tsx -export const StoreContext = createContext(null) - -export const StoreProvider: FC<{ snapshot?: SnapshotInOf }> = ({ - children, - snapshot, -}) => { - const [ctxStore] = useState(() => initStore(snapshot)) - return ( - {children} - ) -} -``` - -The store is accessible at any depth by using the StoreContext or `useStore` hook - -```tsx -export function useStore() { - const store = useContext(StoreContext) - - if (!store) { - // this is especially useful in TypeScript so you don't need to be checking for null all the time - throw new Error('useStore must be used within a StoreProvider.') - } - - return store -} -``` - -The clock, under `components/Clock.tsx`, reacts to changes in the observable `store` by means of the `useObserver` hook. - -```tsx -
- //... - {useObserver(() => ( - - ))} - //... -
-``` diff --git a/examples/with-mobx-keystone-typescript/components/Clock.tsx b/examples/with-mobx-keystone-typescript/components/Clock.tsx deleted file mode 100644 index 08191459605dc..0000000000000 --- a/examples/with-mobx-keystone-typescript/components/Clock.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { FC } from 'react' - -import { RootStore } from '../store' - -const format = (t: Date) => - `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}` -const pad = (n: number) => (n < 10 ? `0${n}` : n) - -interface Props extends Pick {} - -const Clock: FC = props => { - const divStyle = { - backgroundColor: props.light ? '#999' : '#000', - color: '#82FA58', - display: 'inline-block', - font: '50px menlo, monaco, monospace', - padding: '15px', - } - return
{format(props.lastUpdate)}
-} - -export { Clock } diff --git a/examples/with-mobx-keystone-typescript/components/Sample.tsx b/examples/with-mobx-keystone-typescript/components/Sample.tsx deleted file mode 100644 index 7bda459922822..0000000000000 --- a/examples/with-mobx-keystone-typescript/components/Sample.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useEffect, FC } from 'react' -import Link from 'next/link' -import { useObserver } from 'mobx-react-lite' - -import { useStore } from '../store' -import { Clock } from './Clock' - -interface Props { - linkTo: string -} - -export const Sample: FC = props => { - const store = useStore() - - useEffect(() => { - store.start() - return () => store.stop() - }, [store]) - - return ( -
-

Clock

- - {useObserver(() => ( - - ))} - -
- ) -} diff --git a/examples/with-mobx-keystone-typescript/next-env.d.ts b/examples/with-mobx-keystone-typescript/next-env.d.ts deleted file mode 100644 index 7b7aa2c7727d8..0000000000000 --- a/examples/with-mobx-keystone-typescript/next-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/examples/with-mobx-keystone-typescript/package.json b/examples/with-mobx-keystone-typescript/package.json deleted file mode 100644 index b90de6fadc25b..0000000000000 --- a/examples/with-mobx-keystone-typescript/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "with-mobx-keystone-typescript", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "mobx": "^5.15.1", - "mobx-keystone": "^0.41.0", - "mobx-react-lite": "^1.5.2", - "next": "latest", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "typescript": "^3.7.4" - }, - "devDependencies": { - "@babel/plugin-proposal-decorators": "^7.3.0", - "@types/node": "^13.1.1", - "@types/react": "^16.9.17", - "@types/react-dom": "^16.9.4" - }, - "license": "ISC" -} diff --git a/examples/with-mobx-keystone-typescript/pages/_app.tsx b/examples/with-mobx-keystone-typescript/pages/_app.tsx deleted file mode 100644 index 7cff323796437..0000000000000 --- a/examples/with-mobx-keystone-typescript/pages/_app.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { AppContext } from 'next/app' -import { getSnapshot } from 'mobx-keystone' -import { StoreProvider, initStore } from '../store' - -export default function App({ Component, pageProps, initialState }: any) { - return ( - - - - ) -} - -App.getInitialProps = async ({ Component, ctx }: AppContext) => { - // - // Use getInitialProps as a step in the lifecycle when - // we can initialize our store - // - const store = initStore() - - // - // Check whether the page being rendered by the App has a - // static getInitialProps method and if so call it - // - let pageProps = {} - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { initialState: getSnapshot(store), pageProps } -} diff --git a/examples/with-mobx-keystone-typescript/pages/index.tsx b/examples/with-mobx-keystone-typescript/pages/index.tsx deleted file mode 100644 index 31b400c613f4f..0000000000000 --- a/examples/with-mobx-keystone-typescript/pages/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import { NextPage } from 'next' - -import { Sample } from '../components/Sample' - -const IndexPage: NextPage = () => { - return -} - -export default IndexPage diff --git a/examples/with-mobx-keystone-typescript/pages/other.tsx b/examples/with-mobx-keystone-typescript/pages/other.tsx deleted file mode 100644 index fbd3f4cb4d8a6..0000000000000 --- a/examples/with-mobx-keystone-typescript/pages/other.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import { NextPage } from 'next' - -import { Sample } from '../components/Sample' - -const OtherPage: NextPage = () => { - return -} - -export default OtherPage diff --git a/examples/with-mobx-keystone-typescript/store/index.tsx b/examples/with-mobx-keystone-typescript/store/index.tsx deleted file mode 100644 index 2dfd54b53d2f6..0000000000000 --- a/examples/with-mobx-keystone-typescript/store/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { FC, createContext, useState, useContext } from 'react' -import { useStaticRendering } from 'mobx-react-lite' -import { - registerRootStore, - isRootStore, - SnapshotInOf, - fromSnapshot, -} from 'mobx-keystone' - -import { RootStore } from './root' - -// eslint-disable-next-line react-hooks/rules-of-hooks -useStaticRendering(typeof window === 'undefined') - -let store: RootStore | null = null - -export const initStore = (snapshot?: SnapshotInOf) => { - if (typeof window === 'undefined') { - store = new RootStore({}) - } - if (!store) { - store = new RootStore({}) - } - - if (snapshot) { - store = fromSnapshot(snapshot) - } - - if (!isRootStore(store)) registerRootStore(store) - - return store -} - -export const StoreContext = createContext(null) - -export const StoreProvider: FC<{ snapshot?: SnapshotInOf }> = ({ - children, - snapshot, -}) => { - const [ctxStore] = useState(() => initStore(snapshot)) - return ( - {children} - ) -} - -export function useStore() { - const store = useContext(StoreContext) - - if (!store) { - // this is especially useful in TypeScript so you don't need to be checking for null all the time - throw new Error('useStore must be used within a StoreProvider.') - } - - return store -} - -export { RootStore } diff --git a/examples/with-mobx-keystone-typescript/store/root.ts b/examples/with-mobx-keystone-typescript/store/root.ts deleted file mode 100644 index 72e142dae6ce3..0000000000000 --- a/examples/with-mobx-keystone-typescript/store/root.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { - Model, - model, - prop, - modelAction, - prop_dateTimestamp, -} from 'mobx-keystone' - -@model('store/root') -class RootStore extends Model({ - foo: prop(0), - lastUpdate: prop_dateTimestamp(() => new Date()), - light: prop(false), -}) { - timer!: ReturnType - - @modelAction - start() { - this.timer = setInterval(() => { - this.update() - }, 1000) - } - @modelAction - update() { - this.lastUpdate = new Date() - this.light = true - } - - @modelAction - stop() { - clearInterval(this.timer) - } -} - -export { RootStore } diff --git a/examples/with-mobx-keystone-typescript/tsconfig.json b/examples/with-mobx-keystone-typescript/tsconfig.json deleted file mode 100644 index e0e18f29e6902..0000000000000 --- a/examples/with-mobx-keystone-typescript/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "keyofStringsOnly": true, - "isolatedModules": true, - "jsx": "preserve", - "experimentalDecorators": true - }, - "exclude": ["node_modules"], - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] -} From 785ebc4fdda16b7360120748596305035518e293 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:12:24 +0100 Subject: [PATCH 14/32] Update next-page-transitions example --- .../with-next-page-transitions/pages/_app.js | 106 ++++++++---------- 1 file changed, 47 insertions(+), 59 deletions(-) diff --git a/examples/with-next-page-transitions/pages/_app.js b/examples/with-next-page-transitions/pages/_app.js index 64f9dd4435f44..f22a157f98146 100644 --- a/examples/with-next-page-transitions/pages/_app.js +++ b/examples/with-next-page-transitions/pages/_app.js @@ -1,67 +1,55 @@ import React from 'react' -import App from 'next/app' import { PageTransition } from 'next-page-transitions' import Loader from '../components/Loader' const TIMEOUT = 400 -export default class MyApp extends App { - static async getInitialProps({ Component, ctx }) { - let pageProps = {} - - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { pageProps } - } - - render() { - const { Component, pageProps } = this.props - return ( - <> - } - loadingDelay={500} - loadingTimeout={{ - enter: TIMEOUT, - exit: 0, - }} - loadingClassNames="loading-indicator" - > - - - - - ) - } +function MyApp({ Component, pageProps }) { + return ( + <> + } + loadingDelay={500} + loadingTimeout={{ + enter: TIMEOUT, + exit: 0, + }} + loadingClassNames="loading-indicator" + > + + + + + ) } + +export default MyApp From 0eedf582155af380f079a2e6cba306a08d108f0a Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:15:26 +0100 Subject: [PATCH 15/32] Remove next-routes example as dynamic routes are supported by default --- examples/with-next-routes/README.md | 38 ------------------------ examples/with-next-routes/package.json | 15 ---------- examples/with-next-routes/pages/about.js | 5 ---- examples/with-next-routes/pages/blog.js | 26 ---------------- examples/with-next-routes/pages/index.js | 31 ------------------- examples/with-next-routes/routes.js | 5 ---- examples/with-next-routes/server.js | 15 ---------- 7 files changed, 135 deletions(-) delete mode 100644 examples/with-next-routes/README.md delete mode 100644 examples/with-next-routes/package.json delete mode 100644 examples/with-next-routes/pages/about.js delete mode 100644 examples/with-next-routes/pages/blog.js delete mode 100644 examples/with-next-routes/pages/index.js delete mode 100644 examples/with-next-routes/routes.js delete mode 100644 examples/with-next-routes/server.js diff --git a/examples/with-next-routes/README.md b/examples/with-next-routes/README.md deleted file mode 100644 index 6e12b63c99c1a..0000000000000 --- a/examples/with-next-routes/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# Named routes example ([next-routes](https://github.com/fridays/next-routes)) - -This example uses [next-routes](https://github.com/fridays/next-routes) for dynamic routing, which lets you define parameterized, named routes with express-style parameters matching. - -It works similar to the [parameterized-routing](https://github.com/zeit/next.js/tree/master/examples/parameterized-routing) example and makes use of next.js [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) possibilities. - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-next-routes with-next-routes-app -# or -yarn create next-app --example with-next-routes with-next-routes-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-routes -cd with-next-routes -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-routes/package.json b/examples/with-next-routes/package.json deleted file mode 100644 index 577934bb8b172..0000000000000 --- a/examples/with-next-routes/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "with-next-routes", - "version": "1.0.0", - "scripts": { - "dev": "node server.js", - "build": "next build", - "start": "NODE_ENV=production node server.js" - }, - "dependencies": { - "next": "latest", - "next-routes": "^1.0.17", - "react": "^16.7.0", - "react-dom": "^16.7.0" - } -} diff --git a/examples/with-next-routes/pages/about.js b/examples/with-next-routes/pages/about.js deleted file mode 100644 index b843bdbaf0bb8..0000000000000 --- a/examples/with-next-routes/pages/about.js +++ /dev/null @@ -1,5 +0,0 @@ -import { withRouter } from 'next/router' - -const About = ({ router }) =>

About foo {router.query.foo}

- -export default withRouter(About) diff --git a/examples/with-next-routes/pages/blog.js b/examples/with-next-routes/pages/blog.js deleted file mode 100644 index 6f2616fe2b701..0000000000000 --- a/examples/with-next-routes/pages/blog.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' - -const posts = [ - { slug: 'hello-world', title: 'Hello world' }, - { slug: 'another-blog-post', title: 'Another blog post' }, -] - -export default class extends React.Component { - static async getInitialProps({ query, res }) { - const post = posts.find(post => post.slug === query.slug) - - if (!post && res) { - res.statusCode = 404 - } - - return { post } - } - - render() { - const { post } = this.props - - if (!post) return

Post not found

- - return

{post.title}

- } -} diff --git a/examples/with-next-routes/pages/index.js b/examples/with-next-routes/pages/index.js deleted file mode 100644 index d00add8845c98..0000000000000 --- a/examples/with-next-routes/pages/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Link, Router } from '../routes' - -export default () => ( - -) diff --git a/examples/with-next-routes/routes.js b/examples/with-next-routes/routes.js deleted file mode 100644 index 41ea20d1ba823..0000000000000 --- a/examples/with-next-routes/routes.js +++ /dev/null @@ -1,5 +0,0 @@ -const nextRoutes = require('next-routes') -const routes = (module.exports = nextRoutes()) - -routes.add('blog', '/blog/:slug') -routes.add('about', '/about-us/:foo(bar|baz)') diff --git a/examples/with-next-routes/server.js b/examples/with-next-routes/server.js deleted file mode 100644 index 9cd10606b1fdb..0000000000000 --- a/examples/with-next-routes/server.js +++ /dev/null @@ -1,15 +0,0 @@ -const { createServer } = require('http') -const next = require('next') -const routes = require('./routes') - -const port = parseInt(process.env.PORT, 10) || 3000 -const dev = process.env.NODE_ENV !== 'production' -const app = next({ dev }) -const handler = routes.getRequestHandler(app) - -app.prepare().then(() => { - createServer(handler).listen(port, err => { - if (err) throw err - console.log(`> Ready on http://localhost:${port}`) - }) -}) From 6d855165211239ab17c692deaf7eaeb8b995af38 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:16:46 +0100 Subject: [PATCH 16/32] Add link to documentation --- examples/with-next-routes/readme.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 examples/with-next-routes/readme.md diff --git a/examples/with-next-routes/readme.md b/examples/with-next-routes/readme.md new file mode 100644 index 0000000000000..20af448a0d8a7 --- /dev/null +++ b/examples/with-next-routes/readme.md @@ -0,0 +1 @@ +Dynamic routes are now supported by default in Next.js: https://nextjs.org/docs/routing/dynamic-routes From 53e493740c8ed65f81bc09630e86e18529f34c82 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:23:26 +0100 Subject: [PATCH 17/32] Update Overmind example --- examples/with-overmind/pages/_app.js | 12 ------ examples/with-overmind/pages/about.js | 35 ++++++++-------- examples/with-overmind/pages/index.js | 57 +++++++++++++-------------- 3 files changed, 43 insertions(+), 61 deletions(-) diff --git a/examples/with-overmind/pages/_app.js b/examples/with-overmind/pages/_app.js index 8a6062eafed41..62706cc54ab9d 100644 --- a/examples/with-overmind/pages/_app.js +++ b/examples/with-overmind/pages/_app.js @@ -5,18 +5,6 @@ import { Provider } from 'overmind-react' import { config } from '../overmind' class MyApp extends App { - // From the documentation of Next - // CLIENT: After initial route, on page change - // SERVER: On initial route - static async getInitialProps({ Component, ctx }) { - let pageProps = {} - - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { pageProps } - } // CLIENT: On initial route // SERVER: On initial route constructor(props) { diff --git a/examples/with-overmind/pages/about.js b/examples/with-overmind/pages/about.js index be0fc1c910925..36768408cc7f9 100644 --- a/examples/with-overmind/pages/about.js +++ b/examples/with-overmind/pages/about.js @@ -3,27 +3,24 @@ import Header from '../components/Header' import { createOvermindSSR } from 'overmind' import { config } from '../overmind' -class Index extends React.Component { - static async getInitialProps() { - // If we want to produce some mutations we do so by instantiating - // an Overmind SSR instance, do whatever datafetching is needed and - // change the state directly. We return the mutations performed with - // "hydrate" - const overmind = createOvermindSSR(config) +export async function getStaticProps() { + // If we want to produce some mutations we do so by instantiating + // an Overmind SSR instance, do whatever datafetching is needed and + // change the state directly. We return the mutations performed with + // "hydrate" + const overmind = createOvermindSSR(config) - overmind.state.page = 'About' + overmind.state.page = 'About' - return { - mutations: overmind.hydrate(), - } - } - render() { - return ( -
-
-
- ) + return { + mutations: overmind.hydrate(), } } -export default Index +export default function AboutPage() { + return ( +
+
+
+ ) +} diff --git a/examples/with-overmind/pages/index.js b/examples/with-overmind/pages/index.js index 8d340ede3e3a8..97767e5bf571c 100644 --- a/examples/with-overmind/pages/index.js +++ b/examples/with-overmind/pages/index.js @@ -4,38 +4,35 @@ import { config } from '../overmind' import Header from '../components/Header' import Items from '../components/Items' -class Index extends React.Component { - static async getInitialProps() { - // If we want to produce some mutations we do so by instantiating - // an Overmind SSR instance, do whatever datafetching is needed and - // change the state directly. We return the mutations performed with - // "hydrate" - const overmind = createOvermindSSR(config) +export async function getStaticProps() { + // If we want to produce some mutations we do so by instantiating + // an Overmind SSR instance, do whatever datafetching is needed and + // change the state directly. We return the mutations performed with + // "hydrate" + const overmind = createOvermindSSR(config) - overmind.state.page = 'Index' - overmind.state.items = [ - { - id: 0, - title: 'foo', - }, - { - id: 1, - title: 'bar', - }, - ] + overmind.state.page = 'Index' + overmind.state.items = [ + { + id: 0, + title: 'foo', + }, + { + id: 1, + title: 'bar', + }, + ] - return { - mutations: overmind.hydrate(), - } - } - render() { - return ( -
-
- -
- ) + return { + mutations: overmind.hydrate(), } } -export default Index +export default function IndexPage() { + return ( +
+
+ +
+ ) +} From 9363c99ce73fa78085838f21a02ad1cc22fd6fb5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:25:44 +0100 Subject: [PATCH 18/32] Update pretty-url-routing example --- examples/with-pretty-url-routing/README.md | 40 +------------------ examples/with-pretty-url-routing/package.json | 18 --------- .../with-pretty-url-routing/pages/greeting.js | 37 ----------------- .../with-pretty-url-routing/pages/index.js | 13 ------ examples/with-pretty-url-routing/routes.js | 21 ---------- examples/with-pretty-url-routing/server.js | 26 ------------ 6 files changed, 1 insertion(+), 154 deletions(-) delete mode 100644 examples/with-pretty-url-routing/package.json delete mode 100644 examples/with-pretty-url-routing/pages/greeting.js delete mode 100644 examples/with-pretty-url-routing/pages/index.js delete mode 100644 examples/with-pretty-url-routing/routes.js delete mode 100644 examples/with-pretty-url-routing/server.js diff --git a/examples/with-pretty-url-routing/README.md b/examples/with-pretty-url-routing/README.md index 050ab3ef69fe9..20af448a0d8a7 100644 --- a/examples/with-pretty-url-routing/README.md +++ b/examples/with-pretty-url-routing/README.md @@ -1,39 +1 @@ -# Example app with pretty url routing - -This example features: - -- route customisation and parameterization -- reverse routing - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-pretty-url-routing with-pretty-url-routing-app -# or -yarn create next-app --example with-pretty-url-routing with-pretty-url-routing-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-pretty-url-routing -cd with-pretty-url-routing -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). +Dynamic routes are now supported by default in Next.js: https://nextjs.org/docs/routing/dynamic-routes diff --git a/examples/with-pretty-url-routing/package.json b/examples/with-pretty-url-routing/package.json deleted file mode 100644 index e7b5190565927..0000000000000 --- a/examples/with-pretty-url-routing/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "with-pretty-url-routing", - "version": "1.0.0", - "scripts": { - "dev": "node server.js", - "build": "next build", - "start": "NODE_ENV=production node server.js" - }, - "dependencies": { - "express": "^4.15.2", - "next": "latest", - "next-url-prettifier": "^1.0.2", - "prop-types": "^15.5.6", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "ISC" -} diff --git a/examples/with-pretty-url-routing/pages/greeting.js b/examples/with-pretty-url-routing/pages/greeting.js deleted file mode 100644 index e7bc014214cc5..0000000000000 --- a/examples/with-pretty-url-routing/pages/greeting.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { Link } from 'next-url-prettifier' -import { Router } from '../routes' - -export default class GreetingPage extends React.Component { - static getInitialProps({ query: { lang, name } }) { - return { lang, name } - } - - renderSwitchLanguageLink() { - const { lang, name } = this.props - const switchLang = lang === 'fr' ? 'en' : 'fr' - return ( - - {switchLang === 'fr' ? 'Français' : 'English'} - - ) - } - - render() { - const { lang, name } = this.props - return ( -
-

- {lang === 'fr' ? 'Bonjour' : 'Hello'} {name} -

-
{this.renderSwitchLanguageLink()}
-
- ) - } -} - -GreetingPage.propTypes = { - lang: PropTypes.string, - name: PropTypes.string, -} diff --git a/examples/with-pretty-url-routing/pages/index.js b/examples/with-pretty-url-routing/pages/index.js deleted file mode 100644 index a841d2a15813d..0000000000000 --- a/examples/with-pretty-url-routing/pages/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -export default function IndexPage() { - return ( -
-

Homepage

-
- Name: - -
-
- ) -} diff --git a/examples/with-pretty-url-routing/routes.js b/examples/with-pretty-url-routing/routes.js deleted file mode 100644 index e95f8cfa3ab4e..0000000000000 --- a/examples/with-pretty-url-routing/routes.js +++ /dev/null @@ -1,21 +0,0 @@ -const UrlPrettifier = require('next-url-prettifier').default - -const routes = [ - { - page: 'index', - prettyUrl: '/home', - }, - { - page: 'greeting', - prettyUrl: ({ lang = '', name = '' }) => - lang === 'fr' ? `/bonjour/${name}` : `/hello/${name}`, - prettyUrlPatterns: [ - { pattern: '/hello/:name', defaultParams: { lang: 'en' } }, - { pattern: '/bonjour/:name', defaultParams: { lang: 'fr' } }, - ], - }, -] - -const urlPrettifier = new UrlPrettifier(routes) -exports.default = routes -exports.Router = urlPrettifier diff --git a/examples/with-pretty-url-routing/server.js b/examples/with-pretty-url-routing/server.js deleted file mode 100644 index 03a45d64557f0..0000000000000 --- a/examples/with-pretty-url-routing/server.js +++ /dev/null @@ -1,26 +0,0 @@ -const express = require('express') -const next = require('next') -const Router = require('./routes').Router - -const port = parseInt(process.env.PORT, 10) || 3000 -const dev = process.env.NODE_ENV !== 'production' -const app = next({ dev }) -const handle = app.getRequestHandler() - -app.prepare().then(() => { - const server = express() - - Router.forEachPattern((page, pattern, defaultParams) => - server.get(pattern, (req, res) => - app.render( - req, - res, - `/${page}`, - Object.assign({}, defaultParams, req.query, req.params) - ) - ) - ) - - server.get('*', (req, res) => handle(req, res)) - server.listen(port) -}) From 497aa117c80cb45f06fbb058715f58b27ac9ed5b Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:29:03 +0100 Subject: [PATCH 19/32] Remove update with low usage --- examples/with-react-esi/.babelrc | 5 -- examples/with-react-esi/.gitignore | 3 - examples/with-react-esi/Dockerfile | 13 ----- examples/with-react-esi/README.md | 39 ------------- examples/with-react-esi/docker-compose.yml | 22 -------- .../with-react-esi/docker/varnish/default.vcl | 24 -------- examples/with-react-esi/package.json | 20 ------- .../src/components/BreakingNews.js | 51 ----------------- .../src/components/TopArticles.js | 55 ------------------- .../with-react-esi/src/components/Weather.js | 37 ------------- examples/with-react-esi/src/pages/article.js | 33 ----------- examples/with-react-esi/src/pages/index.js | 31 ----------- examples/with-react-esi/src/server.js | 32 ----------- 13 files changed, 365 deletions(-) delete mode 100644 examples/with-react-esi/.babelrc delete mode 100644 examples/with-react-esi/.gitignore delete mode 100644 examples/with-react-esi/Dockerfile delete mode 100644 examples/with-react-esi/README.md delete mode 100644 examples/with-react-esi/docker-compose.yml delete mode 100644 examples/with-react-esi/docker/varnish/default.vcl delete mode 100644 examples/with-react-esi/package.json delete mode 100644 examples/with-react-esi/src/components/BreakingNews.js delete mode 100644 examples/with-react-esi/src/components/TopArticles.js delete mode 100644 examples/with-react-esi/src/components/Weather.js delete mode 100644 examples/with-react-esi/src/pages/article.js delete mode 100644 examples/with-react-esi/src/pages/index.js delete mode 100644 examples/with-react-esi/src/server.js diff --git a/examples/with-react-esi/.babelrc b/examples/with-react-esi/.babelrc deleted file mode 100644 index f464fc2d49ec9..0000000000000 --- a/examples/with-react-esi/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": [ - "next/babel" - ] -} diff --git a/examples/with-react-esi/.gitignore b/examples/with-react-esi/.gitignore deleted file mode 100644 index 44b3d3cecd298..0000000000000 --- a/examples/with-react-esi/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -/node_modules -/dist -.next diff --git a/examples/with-react-esi/Dockerfile b/examples/with-react-esi/Dockerfile deleted file mode 100644 index 47c5fc52fd675..0000000000000 --- a/examples/with-react-esi/Dockerfile +++ /dev/null @@ -1,13 +0,0 @@ -FROM cooptilleuls/varnish:6.0-alpine AS varnish - -COPY docker/varnish/default.vcl /usr/local/etc/varnish/default.vcl - -FROM node:11.5-alpine as node - -RUN mkdir -p /usr/src/app -WORKDIR /usr/src/app - -COPY . ./ -RUN yarn install -RUN yarn build -CMD yarn start diff --git a/examples/with-react-esi/README.md b/examples/with-react-esi/README.md deleted file mode 100644 index f91931570d686..0000000000000 --- a/examples/with-react-esi/README.md +++ /dev/null @@ -1,39 +0,0 @@ -# React ESI example - -React Server Side rendering is very costly and takes a lot of server's CPU power for that. -One of the best solutions for this problem is cache fragments of rendered pages, each fragment corresponding to a component subtree. -This example shows how to leverage [React ESI](https://github.com/dunglas/react-esi) and the Varnish HTTP accelerator to improve dramatically the performance of an app. - -The example (and the underlying lib) can work with any ESI implementation, including Akamai, Fastly and Cloudflare Workers. - -# Example app with prefetching pages - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-react-esi with-react-esi-app -# or -yarn create next-app --example with-react-esi with-react-esi-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-esi -cd with-react-esi -``` - -### Starting the Varnish cache server - -A Docker setup containing Varnish with [the appropriate config](docker/varnish/default.vcl) and Node is provided. -Run the following command to start the project: - -```bash -docker-compose up -``` diff --git a/examples/with-react-esi/docker-compose.yml b/examples/with-react-esi/docker-compose.yml deleted file mode 100644 index c3caa12c2a4d1..0000000000000 --- a/examples/with-react-esi/docker-compose.yml +++ /dev/null @@ -1,22 +0,0 @@ -version: '3.4' - -services: - node: - build: - context: . - target: node - ports: - - '8080:80' # To debug - - varnish: - build: - context: . - target: varnish - depends_on: - - node - volumes: - - ./docker/varnish/:/usr/local/etc/varnish:ro - tmpfs: - - /usr/local/var/varnish:exec - ports: - - '80:80' diff --git a/examples/with-react-esi/docker/varnish/default.vcl b/examples/with-react-esi/docker/varnish/default.vcl deleted file mode 100644 index 84b04447a5d88..0000000000000 --- a/examples/with-react-esi/docker/varnish/default.vcl +++ /dev/null @@ -1,24 +0,0 @@ -vcl 4.0; - -import std; - -backend node { - .host = "node"; - .port = "80"; -} - -sub vcl_backend_response { - # Enable ESI support - if (beresp.http.Surrogate-Control ~ "ESI/1.0") { - unset beresp.http.Surrogate-Control; - set beresp.do_esi = true; - } -} - -sub vcl_recv { - # Remove cookies to prevent a cache miss, you maybe don't want to do this! - unset req.http.cookie; - - # Announce ESI support to Node (optional) - set req.http.Surrogate-Capability = "key=ESI/1.0"; -} diff --git a/examples/with-react-esi/package.json b/examples/with-react-esi/package.json deleted file mode 100644 index 90d7563b9d88f..0000000000000 --- a/examples/with-react-esi/package.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "with-react-esi", - "author": "Kévin Dunglas ", - "main": "dist/server.js", - "dependencies": { - "express": "^4.16.4", - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "react-esi": "^0.1" - }, - "scripts": { - "build": "babel src -d dist && next build dist", - "start": "NODE_ENV=production node dist/server.js" - }, - "devDependencies": { - "@babel/cli": "^7.2.3", - "@babel/node": "^7.2.2" - } -} diff --git a/examples/with-react-esi/src/components/BreakingNews.js b/examples/with-react-esi/src/components/BreakingNews.js deleted file mode 100644 index 93fe63494e2e1..0000000000000 --- a/examples/with-react-esi/src/components/BreakingNews.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react' - -// functional component -const BreakingNews = props => ( -
-

Breaking News

- {props.news && - props.news.map((breaking, i) => ( -
-

{breaking.title}

-

{breaking.body}

-
- ))} - We are{' '} - {typeof window !== 'undefined' ? 'client-side' : 'server-side'} (now, - check the source of this page) -
- generated at {new Date().toISOString()} -
-
-) - -BreakingNews.getInitialProps = async ({ props, req, res }) => { - if (res) { - // server-side, we always want to serve fresh data for this block! - res.set('Cache-Control', 's-maxage=0, maxage=0') - } - - return new Promise(resolve => - // Simulate a delay (slow network, huge computation...) - setTimeout( - () => - resolve({ - ...props, // Props from the main page, passed through the internal fragment URL server-side - news: [ - { - title: 'Aenean eleifend ex', - body: 'Proin commodo ullamcorper cursus.', - }, - { - title: 'Morbi rutrum tortor nec eros vestibulum', - body: 'Maecenas gravida eu sapien quis sollicitudin.', - }, - ], - }), - 5000 - ) - ) -} - -export default BreakingNews diff --git a/examples/with-react-esi/src/components/TopArticles.js b/examples/with-react-esi/src/components/TopArticles.js deleted file mode 100644 index dfa8d22c32d80..0000000000000 --- a/examples/with-react-esi/src/components/TopArticles.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' - -/** - * Return the top articles of the month. Can be cached 1 hour. - */ -export default class TopArticles extends React.Component { - static async getInitialProps({ props, req, res }) { - if (res) { - // server side, cache this fragment for 1 hour - res.set('Cache-Control', 'public, s-maxage=3600') - } - - // Fetch the articles from a remote API, it may take some time... - return new Promise(resolve => { - // Simulate a delay (slow network, huge computation...) - setTimeout( - () => - resolve({ - ...props, // Props from the main page, passed through the internal fragment URL server-side - articles: [ - { - title: 'Lorem ipsum dolor', - body: 'Phasellus aliquet pellentesque dolor nec volutpat.', - }, - { - title: 'Donec ut porttitor nisl', - body: 'Praesent vel odio vel dui pellentesque sodales.', - }, - ], - }), - 2000 - ) - }) - } - - render() { - return ( -
-

Top articles

- {this.props.articles && - this.props.articles.map((article, i) => ( -
-

{article.title}

-

{article.body}

-
- ))} - This block has been generated the first time as an include of{' '} - {this.props.from}. -
- generated at {new Date().toISOString()} -
-
- ) - } -} diff --git a/examples/with-react-esi/src/components/Weather.js b/examples/with-react-esi/src/components/Weather.js deleted file mode 100644 index f4527cc22f3f3..0000000000000 --- a/examples/with-react-esi/src/components/Weather.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' - -/** - * Return the weather. This component is not loaded on the homepage, to test that getInitialProps works client-side too. - */ -export default class Weather extends React.Component { - static async getInitialProps({ props, req, res }) { - // Fetch the weather from a remote API, it may take some time... - return new Promise(resolve => { - console.log(typeof window !== 'undefined' ? 'client-side' : 'server-side') - // Simulate a delay (slow network, huge computation...) - setTimeout( - () => - resolve({ - ...props, // Props from the main page, passed through the internal fragment URL server-side - weather: 'sunny ☀️', - }), - 2000 - ) - }) - } - - render() { - console.log(typeof window !== 'undefined' ? 'client-side' : 'server-side') - - return ( -
-

Weather

- {this.props.weather} - -
- generated at {new Date().toISOString()} -
-
- ) - } -} diff --git a/examples/with-react-esi/src/pages/article.js b/examples/with-react-esi/src/pages/article.js deleted file mode 100644 index 59b7f973ccf46..0000000000000 --- a/examples/with-react-esi/src/pages/article.js +++ /dev/null @@ -1,33 +0,0 @@ -import withESI from 'react-esi' -import React from 'react' -import Link from 'next/link' -import BreakingNews from '../components/BreakingNews' -import TopArticles from '../components/TopArticles' -import Weather from '../components/Weather' - -const BreakingNewsESI = withESI(BreakingNews, 'BreakingNews') -const TopArticlesESI = withESI(TopArticles, 'TopArticles') -const WeatherESI = withESI(Weather, 'Weather') - -const Article = () => ( -
-

An article

-
This a specific article of the website!
- - {/* TODO: introduce a layout */} - - - - - - Go back to the homepage - -
-) - -Article.getInitialProps = async function({ res }) { - if (res) res.set('Cache-Control', 's-maxage: 10, maxage: 0') - return {} -} - -export default Article diff --git a/examples/with-react-esi/src/pages/index.js b/examples/with-react-esi/src/pages/index.js deleted file mode 100644 index 59efba9b1c673..0000000000000 --- a/examples/with-react-esi/src/pages/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import withESI from 'react-esi' -import React from 'react' -import Link from 'next/link' -import BreakingNews from '../components/BreakingNews' -import TopArticles from '../components/TopArticles' - -const BreakingNewsESI = withESI(BreakingNews, 'BreakingNews') -const TopArticlesESI = withESI(TopArticles, 'TopArticles') - -const Index = () => ( -
-

React ESI demo app

-
-

Welcome to my news website!

- - Go to an article - -
- - {/* TODO: introduce a layout */} - - -
-) - -Index.getInitialProps = async function({ res }) { - if (res) res.set('Cache-Control', 's-maxage: 10') - return {} -} - -export default Index diff --git a/examples/with-react-esi/src/server.js b/examples/with-react-esi/src/server.js deleted file mode 100644 index 512f39d4412d3..0000000000000 --- a/examples/with-react-esi/src/server.js +++ /dev/null @@ -1,32 +0,0 @@ -import express from 'express' -import next from 'next' -import { path, serveFragment } from 'react-esi/lib/server' - -const dev = process.env.NODE_ENV !== 'production' -const port = parseInt(process.env.PORT, 10) || (dev ? 3000 : 80) -const app = next({ dev, dir: dev ? 'src/' : 'dist/' }) -const handle = app.getRequestHandler() - -app.prepare().then(() => { - const server = express() - - server.use((req, res, next) => { - // Send the Surrogate-Control header to announce ESI support to proxies (optional with Varnish) - res.set('Surrogate-Control', 'content="ESI/1.0"') - next() - }) - - server.get(path, (req, res) => - serveFragment( - req, - res, - fragmentID => require(`./components/${fragmentID}`).default - ) - ) - server.get('*', handle) - - server.listen(port, err => { - if (err) throw err - console.log(`> Ready on http://localhost:${port}`) - }) -}) From 53a741c161be100cff986356e6bb69e094bb0ed9 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:30:19 +0100 Subject: [PATCH 20/32] Update with-react-ga example --- examples/with-react-ga/pages/_app.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/examples/with-react-ga/pages/_app.js b/examples/with-react-ga/pages/_app.js index a5c2ea6db546f..f89e5346612da 100644 --- a/examples/with-react-ga/pages/_app.js +++ b/examples/with-react-ga/pages/_app.js @@ -4,16 +4,6 @@ import Router from 'next/router' import { initGA, logPageView } from '../utils/analytics' export default class MyApp extends App { - static async getInitialProps({ Component, router, ctx }) { - let pageProps = {} - - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { pageProps } - } - componentDidMount() { initGA() logPageView() From e3888b85f89b992ae35986ea9863e7bf43598ab5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:31:57 +0100 Subject: [PATCH 21/32] Update React Helmet example --- examples/with-react-helmet/pages/_app.js | 51 +++++++++--------------- 1 file changed, 19 insertions(+), 32 deletions(-) diff --git a/examples/with-react-helmet/pages/_app.js b/examples/with-react-helmet/pages/_app.js index 6ea91ec5f49be..6a524821690d6 100644 --- a/examples/with-react-helmet/pages/_app.js +++ b/examples/with-react-helmet/pages/_app.js @@ -1,36 +1,23 @@ import React from 'react' -import App from 'next/app' import Helmet from 'react-helmet' -export default class MyApp extends App { - static async getInitialProps({ Component, ctx }) { - let pageProps = {} - - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { pageProps } - } - - render() { - const { Component, pageProps } = this.props - - return ( - <> - - - - ) - } +function MyApp({ Component, pageProps }) { + return ( + <> + + + + ) } + +export default MyApp From e7d4e9546ffb67fdd03eef38aa9baf8df4d7a780 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:40:44 +0100 Subject: [PATCH 22/32] Remove mobile-detect from carousel example --- .../with-react-multi-carousel/pages/index.js | 21 +------------------ 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/examples/with-react-multi-carousel/pages/index.js b/examples/with-react-multi-carousel/pages/index.js index 9d177a4811815..cfdad8970c6ce 100644 --- a/examples/with-react-multi-carousel/pages/index.js +++ b/examples/with-react-multi-carousel/pages/index.js @@ -1,5 +1,4 @@ import React from 'react' -import MobileDetect from 'mobile-detect' import { withStyles } from '@material-ui/core/styles' import Carousel from 'react-multi-carousel' @@ -17,24 +16,6 @@ const styles = theme => ({ }) class Index extends React.Component { - static getInitialProps({ req, isServer }) { - let userAgent - let deviceType - if (req) { - userAgent = req.headers['user-agent'] - } else { - userAgent = navigator.userAgent - } - const md = new MobileDetect(userAgent) - if (md.tablet()) { - deviceType = 'tablet' - } else if (md.mobile()) { - deviceType = 'mobile' - } else { - deviceType = 'desktop' - } - return { deviceType } - } render() { const { classes } = this.props const images = [ @@ -75,7 +56,7 @@ class Index extends React.Component { infinite containerClass="container-with-dots" itemClass="image-item" - deviceType={this.props.deviceType} + deviceType={''} > {images.map(image => { return {image} From b82ec6f5916422105404b45467ceb24d69112bdf Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:41:09 +0100 Subject: [PATCH 23/32] Remove react-useragent as it shows a bad practice --- examples/with-react-useragent/README.md | 49 -------------------- examples/with-react-useragent/package.json | 16 ------- examples/with-react-useragent/pages/_app.js | 37 --------------- examples/with-react-useragent/pages/index.js | 47 ------------------- 4 files changed, 149 deletions(-) delete mode 100644 examples/with-react-useragent/README.md delete mode 100644 examples/with-react-useragent/package.json delete mode 100644 examples/with-react-useragent/pages/_app.js delete mode 100644 examples/with-react-useragent/pages/index.js diff --git a/examples/with-react-useragent/README.md b/examples/with-react-useragent/README.md deleted file mode 100644 index 153d3efc88129..0000000000000 --- a/examples/with-react-useragent/README.md +++ /dev/null @@ -1,49 +0,0 @@ -# react-useragent example - -This example shows how to add user-agent awarness to your next.js app and set it up for server side rendering using [@quentin-sommer/react-useragent](https://github.com/quentin-sommer/react-useragent). It will enable you to directly detect the device from the server side. - -You can then decide what to render depending on the device. For example: - -- Smaller image for phones -- Dedicated download button fos iOS devices. - -The example uses the `pages/_app.js` file to automatically inject user-agent detection in all your pages. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-react-useragent) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-react-useragent with-react-useragent-app -# or -yarn create next-app --example with-react-useragent with-react-useragent-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-useragent -cd with-react-useragent -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-useragent/package.json b/examples/with-react-useragent/package.json deleted file mode 100644 index 61039516ba69b..0000000000000 --- a/examples/with-react-useragent/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "with-react-useragent", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "@quentin-sommer/react-useragent": "2.0.0", - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "ISC" -} diff --git a/examples/with-react-useragent/pages/_app.js b/examples/with-react-useragent/pages/_app.js deleted file mode 100644 index 02904928f4a4b..0000000000000 --- a/examples/with-react-useragent/pages/_app.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import App from 'next/app' -import { UserAgentProvider } from '@quentin-sommer/react-useragent' - -const PageWrapper = Comp => - class extends React.Component { - /* - * Need to use args.ctx - * See https://github.com/zeit/next.js#custom-document - */ - static async getInitialProps(args) { - return { - ua: args.ctx.req - ? args.ctx.req.headers['user-agent'] - : navigator.userAgent, - ...(Comp.getInitialProps ? await Comp.getInitialProps(args) : null), - } - } - - render() { - const { ua, ...props } = this.props - return ( - - - - ) - } - } - -class MyApp extends App { - render() { - const { Component, pageProps } = this.props - return - } -} - -export default PageWrapper(MyApp) diff --git a/examples/with-react-useragent/pages/index.js b/examples/with-react-useragent/pages/index.js deleted file mode 100644 index a64daeb4b6955..0000000000000 --- a/examples/with-react-useragent/pages/index.js +++ /dev/null @@ -1,47 +0,0 @@ -import React, { Component } from 'react' -import { UserAgent } from '@quentin-sommer/react-useragent' - -class Index extends Component { - render() { - return ( -
-

- The following texts render conditionally depending of your user-agent, - try visiting with another device or using the chrome dev tools device - emulator ! -

- -
-

You seem to be on an android device

-
- - -
-

You seem to be on an ios device

-
- - -
-

You seem to be on a computer

-
- - -

Hello Linux!

- - -

Hello MacOS!

- - -

Hello Windows!

- - -
- ) - } -} - -export default Index From 10e54406aff66680ae9a105a4c5c286aebf0f358 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:44:25 +0100 Subject: [PATCH 24/32] Remove react-uwp example as it has low usage --- examples/with-react-uwp/README.md | 42 ----------------- .../with-react-uwp/components/ThemeWrapper.js | 18 -------- examples/with-react-uwp/package.json | 16 ------- examples/with-react-uwp/pages/_document.js | 35 -------------- examples/with-react-uwp/pages/index.js | 46 ------------------- 5 files changed, 157 deletions(-) delete mode 100644 examples/with-react-uwp/README.md delete mode 100644 examples/with-react-uwp/components/ThemeWrapper.js delete mode 100644 examples/with-react-uwp/package.json delete mode 100644 examples/with-react-uwp/pages/_document.js delete mode 100644 examples/with-react-uwp/pages/index.js diff --git a/examples/with-react-uwp/README.md b/examples/with-react-uwp/README.md deleted file mode 100644 index 3db8104a06ca0..0000000000000 --- a/examples/with-react-uwp/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# React-UWP example - -This example features how you use [react-uwp](https://github.com/myxvisual/react-uwp) (React Components that Implement Microsoft's UWP Design & Fluent Design.) with Next.js. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-react-uwp) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-react-uwp with-react-uwp-app -# or -yarn create next-app --example with-react-uwp with-react-uwp-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-uwp -cd with-react-uwp -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-react-uwp/components/ThemeWrapper.js b/examples/with-react-uwp/components/ThemeWrapper.js deleted file mode 100644 index bd8a4e918351c..0000000000000 --- a/examples/with-react-uwp/components/ThemeWrapper.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react' -import Theme from 'react-uwp/Theme' - -export class ThemeWrapper extends Component { - render() { - const { children, style, ...props } = this.props - return ( - - {children} - - ) - } -} - -export default ThemeWrapper diff --git a/examples/with-react-uwp/package.json b/examples/with-react-uwp/package.json deleted file mode 100644 index 510fea0311c22..0000000000000 --- a/examples/with-react-uwp/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "with-react-uwp", - "version": "1.0.0", - "dependencies": { - "babel-core": "^6.25.0", - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "react-uwp": "^1.0.9" - }, - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - } -} diff --git a/examples/with-react-uwp/pages/_document.js b/examples/with-react-uwp/pages/_document.js deleted file mode 100644 index e20bdcc328384..0000000000000 --- a/examples/with-react-uwp/pages/_document.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Document, { Head, Main, NextScript } from 'next/document' - -export default class MyDocument extends Document { - static getInitialProps({ renderPage }) { - const { html, head, errorHtml, chunks } = renderPage() - return { html, head, errorHtml, chunks } - } - - static contextTypes = { theme: PropTypes.object } - - render() { - return ( - - - - - - - - -
- - - - ) - } -} diff --git a/examples/with-react-uwp/pages/index.js b/examples/with-react-uwp/pages/index.js deleted file mode 100644 index 654f4369ec1be..0000000000000 --- a/examples/with-react-uwp/pages/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -import ThemeWrapper from '../components/ThemeWrapper' -import getTheme from 'react-uwp/styles/getTheme' - -import { Button, ColorPicker, DatePicker, ProgressRing } from 'react-uwp' - -class Index extends Component { - static async getInitialProps({ req }) { - let userAgent - if (typeof window !== 'undefined') { - userAgent = navigator.userAgent - } else { - userAgent = req.headers['user-agent'] - } - - return { userAgent } - } - static contextTypes = { theme: PropTypes.object } - - render() { - const { userAgent } = this.props - return ( - - - - - -

{userAgent.slice(12)}...

- - ) - } -} - -export default Index From 3265644bcb3f727f953adaa46396e2fa37ce63f5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:46:46 +0100 Subject: [PATCH 25/32] Remove recompose example as it shows outdated practices --- examples/with-recompose/.babelrc | 6 --- examples/with-recompose/README.md | 44 ------------------- examples/with-recompose/package.json | 14 ------ examples/with-recompose/pages/index.js | 23 ---------- .../with-redux-reselect-recompose/.gitignore | 1 - .../with-redux-reselect-recompose/README.md | 42 ------------------ .../actions/index.js | 11 ----- .../components/addCount.js | 25 ----------- .../components/clock.js | 35 --------------- .../components/page.js | 31 ------------- .../constants/actionTypes.js | 2 - .../containers/page.js | 20 --------- .../package.json | 24 ---------- .../pages/index.js | 30 ------------- .../pages/other.js | 30 ------------- .../reducers/count.js | 30 ------------- .../reducers/index.js | 10 ----- .../selectors/index.js | 12 ----- .../with-redux-reselect-recompose/store.js | 9 ---- 19 files changed, 399 deletions(-) delete mode 100644 examples/with-recompose/.babelrc delete mode 100644 examples/with-recompose/README.md delete mode 100644 examples/with-recompose/package.json delete mode 100644 examples/with-recompose/pages/index.js delete mode 100644 examples/with-redux-reselect-recompose/.gitignore delete mode 100644 examples/with-redux-reselect-recompose/README.md delete mode 100644 examples/with-redux-reselect-recompose/actions/index.js delete mode 100644 examples/with-redux-reselect-recompose/components/addCount.js delete mode 100644 examples/with-redux-reselect-recompose/components/clock.js delete mode 100644 examples/with-redux-reselect-recompose/components/page.js delete mode 100644 examples/with-redux-reselect-recompose/constants/actionTypes.js delete mode 100644 examples/with-redux-reselect-recompose/containers/page.js delete mode 100644 examples/with-redux-reselect-recompose/package.json delete mode 100644 examples/with-redux-reselect-recompose/pages/index.js delete mode 100644 examples/with-redux-reselect-recompose/pages/other.js delete mode 100644 examples/with-redux-reselect-recompose/reducers/count.js delete mode 100644 examples/with-redux-reselect-recompose/reducers/index.js delete mode 100644 examples/with-redux-reselect-recompose/selectors/index.js delete mode 100644 examples/with-redux-reselect-recompose/store.js diff --git a/examples/with-recompose/.babelrc b/examples/with-recompose/.babelrc deleted file mode 100644 index e418f04c7780e..0000000000000 --- a/examples/with-recompose/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [ - ["lodash", { "id": ["lodash", "recompose"] }] - ] -} diff --git a/examples/with-recompose/README.md b/examples/with-recompose/README.md deleted file mode 100644 index 04317f1c4640e..0000000000000 --- a/examples/with-recompose/README.md +++ /dev/null @@ -1,44 +0,0 @@ -# Recompose example - -This example show how to use [Recompose](https://github.com/acdlite/recompose) to wrap page components using High Order Components and use `getInitialProps` without worries. - -It also configure Babel to change our recompose imports so we're going to actually import only the functions we need and reduce the bundle size. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-recompose) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-recompose with-recompose-app -# or -yarn create next-app --example with-recompose with-recompose-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-recompose -cd with-recompose -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-recompose/package.json b/examples/with-recompose/package.json deleted file mode 100644 index de0a4d91cded2..0000000000000 --- a/examples/with-recompose/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "babel-plugin-lodash": "^3.2.11", - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "recompose": "^0.24.0" - } -} diff --git a/examples/with-recompose/pages/index.js b/examples/with-recompose/pages/index.js deleted file mode 100644 index 81b5dac96e27c..0000000000000 --- a/examples/with-recompose/pages/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { compose, withState, setStatic } from 'recompose' - -// the setStatic HOC allow us to define the getInitialProps props to the enhanced component -// it needs to be at the top of the compose -const enhance = compose( - // set the static async method getInitialProps - setStatic('getInitialProps', async ({ req }) => { - const isServer = !!req - // log if we're server or client side - if (isServer) console.log('from server') - else console.log('from client') - // return a prop to know if we're server or client side - return { isServer } - }), - withState('counter', 'setCounter', 0) -) - -// our enhanced page component -export default enhance(({ counter, setCounter, isServer }) => ( - -)) diff --git a/examples/with-redux-reselect-recompose/.gitignore b/examples/with-redux-reselect-recompose/.gitignore deleted file mode 100644 index b512c09d47662..0000000000000 --- a/examples/with-redux-reselect-recompose/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules \ No newline at end of file diff --git a/examples/with-redux-reselect-recompose/README.md b/examples/with-redux-reselect-recompose/README.md deleted file mode 100644 index a8ce68377be0f..0000000000000 --- a/examples/with-redux-reselect-recompose/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Redux with reselect and recompose example - -This example is based on the great work of [with-redux](https://github.com/zeit/next.js/blob/master/examples/with-redux/) example with the addition of [reselect](https://github.com/reactjs/reselect) and [recompose](https://github.com/acdlite/recompose) - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-redux-reselect-recompose) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-redux-reselect-recompose with-redux-reselect-recompose-app -# or -yarn create next-app --example with-redux-reselect-recompose with-redux-reselect-recompose-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-redux-reselect-recompose -cd with-redux-reselect-recompose -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-redux-reselect-recompose/actions/index.js b/examples/with-redux-reselect-recompose/actions/index.js deleted file mode 100644 index b9a0bd87aa04a..0000000000000 --- a/examples/with-redux-reselect-recompose/actions/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import { TICK, ADD } from '../constants/actionTypes' - -export const addCount = () => ({ type: ADD }) - -export const setClock = (light, ts) => ({ type: TICK, light, ts }) - -export const serverRenderClock = isServer => dispatch => - dispatch(setClock(!isServer, Date.now())) - -export const startClock = () => dispatch => - setInterval(() => dispatch(setClock(true, Date.now())), 800) diff --git a/examples/with-redux-reselect-recompose/components/addCount.js b/examples/with-redux-reselect-recompose/components/addCount.js deleted file mode 100644 index b9f84c7793bd1..0000000000000 --- a/examples/with-redux-reselect-recompose/components/addCount.js +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from 'prop-types' -import { compose, setDisplayName, pure, setPropTypes } from 'recompose' - -const AddCount = ({ count, addCount }) => ( -
- -

- AddCount: {count} -

- -
-) - -export default compose( - setDisplayName('AddCount'), - setPropTypes({ - count: PropTypes.number, - addCount: PropTypes.func, - }), - pure -)(AddCount) diff --git a/examples/with-redux-reselect-recompose/components/clock.js b/examples/with-redux-reselect-recompose/components/clock.js deleted file mode 100644 index 96984bfd51593..0000000000000 --- a/examples/with-redux-reselect-recompose/components/clock.js +++ /dev/null @@ -1,35 +0,0 @@ -import PropTypes from 'prop-types' -import { compose, pure, setDisplayName, setPropTypes } from 'recompose' - -const format = t => - `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}` - -const pad = n => (n < 10 ? `0${n}` : n) - -const Clock = ({ lastUpdate, light }) => ( -
- {format(new Date(lastUpdate))} - -
-) - -export default compose( - setDisplayName('Clock'), - setPropTypes({ - lastUpdate: PropTypes.number, - light: PropTypes.bool, - }), - pure -)(Clock) diff --git a/examples/with-redux-reselect-recompose/components/page.js b/examples/with-redux-reselect-recompose/components/page.js deleted file mode 100644 index e35e353d0ac60..0000000000000 --- a/examples/with-redux-reselect-recompose/components/page.js +++ /dev/null @@ -1,31 +0,0 @@ -import PropTypes from 'prop-types' -import Link from 'next/link' -import { compose, setDisplayName, pure, setPropTypes } from 'recompose' -import Clock from './clock' -import AddCount from './addCount' - -const Page = ({ title, linkTo, light, lastUpdate, count, addCount }) => ( -
-

{title}

- - - -
-) - -export default compose( - setDisplayName('Page'), - setPropTypes({ - title: PropTypes.string, - linkTo: PropTypes.string, - light: PropTypes.bool, - lastUpdate: PropTypes.number, - count: PropTypes.number, - addCount: PropTypes.func, - }), - pure -)(Page) diff --git a/examples/with-redux-reselect-recompose/constants/actionTypes.js b/examples/with-redux-reselect-recompose/constants/actionTypes.js deleted file mode 100644 index bd6338c5e0c60..0000000000000 --- a/examples/with-redux-reselect-recompose/constants/actionTypes.js +++ /dev/null @@ -1,2 +0,0 @@ -export const ADD = 'ADD' -export const TICK = 'TICK' diff --git a/examples/with-redux-reselect-recompose/containers/page.js b/examples/with-redux-reselect-recompose/containers/page.js deleted file mode 100644 index 61d14592bd041..0000000000000 --- a/examples/with-redux-reselect-recompose/containers/page.js +++ /dev/null @@ -1,20 +0,0 @@ -import { connect } from 'react-redux' -import { createSelector } from 'reselect' -import { compose, setDisplayName, pure } from 'recompose' -import { addCount } from '../actions' -import { selectLight, selectLastUpdate, selectCount } from '../selectors' -import Page from '../components/page' - -export default compose( - setDisplayName('PageContainer'), - connect( - createSelector( - selectLight(), - selectLastUpdate(), - selectCount(), - (light, lastUpdate, count) => ({ light, lastUpdate, count }) - ), - { addCount } - ), - pure -)(Page) diff --git a/examples/with-redux-reselect-recompose/package.json b/examples/with-redux-reselect-recompose/package.json deleted file mode 100644 index 037661913f6f3..0000000000000 --- a/examples/with-redux-reselect-recompose/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "with-redux-reselect-recompose", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "next": "latest", - "next-redux-wrapper": "^1.0.0", - "prop-types": "^15.5.10", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "react-redux": "^5.0.1", - "recompose": "^0.23.5", - "redux": "^3.6.0", - "redux-logger": "^3.0.6", - "redux-thunk": "^2.2.0", - "reselect": "^3.0.1" - }, - "author": "Phuc Nguyen Hoang", - "license": "MIT" -} diff --git a/examples/with-redux-reselect-recompose/pages/index.js b/examples/with-redux-reselect-recompose/pages/index.js deleted file mode 100644 index ed5827c299171..0000000000000 --- a/examples/with-redux-reselect-recompose/pages/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import withRedux from 'next-redux-wrapper' -import { compose, setDisplayName, pure, lifecycle, withProps } from 'recompose' -import { startClock, addCount, serverRenderClock } from '../actions' -import Page from '../containers/page' -import initStore from '../store' - -const Counter = compose( - setDisplayName('IndexPage'), - withProps({ - title: 'Index page', - linkTo: '/other', - }), - lifecycle({ - componentDidMount() { - this.timer = this.props.startClock() - }, - componentWillUnmount() { - clearInterval(this.timer) - }, - }), - pure -)(Page) - -Counter.getInitialProps = ({ store, isServer }) => { - store.dispatch(serverRenderClock(isServer)) - store.dispatch(addCount()) - return { isServer } -} - -export default withRedux(initStore, null, { startClock })(Counter) diff --git a/examples/with-redux-reselect-recompose/pages/other.js b/examples/with-redux-reselect-recompose/pages/other.js deleted file mode 100644 index 455f9deece04a..0000000000000 --- a/examples/with-redux-reselect-recompose/pages/other.js +++ /dev/null @@ -1,30 +0,0 @@ -import withRedux from 'next-redux-wrapper' -import { compose, setDisplayName, pure, lifecycle, withProps } from 'recompose' -import { startClock, addCount, serverRenderClock } from '../actions' -import Page from '../containers/page' -import initStore from '../store' - -const Counter = compose( - setDisplayName('OtherPage'), - withProps({ - title: 'Other page', - linkTo: '/', - }), - lifecycle({ - componentDidMount() { - this.timer = this.props.startClock() - }, - componentWillUnmount() { - clearInterval(this.timer) - }, - }), - pure -)(Page) - -Counter.getInitialProps = ({ store, isServer }) => { - store.dispatch(serverRenderClock(isServer)) - store.dispatch(addCount()) - return { isServer } -} - -export default withRedux(initStore, null, { startClock })(Counter) diff --git a/examples/with-redux-reselect-recompose/reducers/count.js b/examples/with-redux-reselect-recompose/reducers/count.js deleted file mode 100644 index db9642a759c5a..0000000000000 --- a/examples/with-redux-reselect-recompose/reducers/count.js +++ /dev/null @@ -1,30 +0,0 @@ -import { ADD, TICK } from '../constants/actionTypes' - -export const initialState = { - lastUpdate: 0, - light: false, - count: 0, -} - -export default (state = initialState, action) => { - const { type, ts, light } = action - - switch (type) { - case TICK: { - return Object.assign({}, state, { - lastUpdate: ts, - light: !!light, - }) - } - - case ADD: { - return Object.assign({}, state, { - count: state.count + 1, - }) - } - - default: { - return state - } - } -} diff --git a/examples/with-redux-reselect-recompose/reducers/index.js b/examples/with-redux-reselect-recompose/reducers/index.js deleted file mode 100644 index cf5750d72fb1b..0000000000000 --- a/examples/with-redux-reselect-recompose/reducers/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { combineReducers } from 'redux' -import count, { initialState as countState } from './count' - -export const initialState = { - count: countState, -} - -export default combineReducers({ - count, -}) diff --git a/examples/with-redux-reselect-recompose/selectors/index.js b/examples/with-redux-reselect-recompose/selectors/index.js deleted file mode 100644 index 985ab093ae896..0000000000000 --- a/examples/with-redux-reselect-recompose/selectors/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import { createSelector } from 'reselect' - -export const selectState = () => state => state.count - -export const selectCount = () => - createSelector(selectState(), count => count.count) - -export const selectLight = () => - createSelector(selectState(), count => count.light) - -export const selectLastUpdate = () => - createSelector(selectState(), count => count.lastUpdate) diff --git a/examples/with-redux-reselect-recompose/store.js b/examples/with-redux-reselect-recompose/store.js deleted file mode 100644 index 172519b40f3b0..0000000000000 --- a/examples/with-redux-reselect-recompose/store.js +++ /dev/null @@ -1,9 +0,0 @@ -import thunkMiddleware from 'redux-thunk' -import { createStore, applyMiddleware, compose } from 'redux' -import { createLogger } from 'redux-logger' -import reducer, { initialState } from './reducers' - -export default (state = initialState) => { - const middlewares = [thunkMiddleware, createLogger()] - return createStore(reducer, state, compose(applyMiddleware(...middlewares))) -} From 4f48668f9d513a1e476142b140c0f141db4dde8e Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:49:05 +0100 Subject: [PATCH 26/32] Remove refnux example as it has low usage --- examples/with-refnux/README.md | 68 ------------------- examples/with-refnux/helpers/getStore.js | 18 ----- examples/with-refnux/helpers/withRefnux.js | 41 ----------- examples/with-refnux/package.json | 16 ----- examples/with-refnux/pages/page1.js | 29 -------- examples/with-refnux/pages/page2.js | 28 -------- .../with-refnux/store/counterIncrement.js | 5 -- examples/with-refnux/store/getInitialState.js | 8 --- examples/with-refnux/store/getStore.js | 16 ----- examples/with-refnux/store/setTitle.js | 5 -- 10 files changed, 234 deletions(-) delete mode 100644 examples/with-refnux/README.md delete mode 100644 examples/with-refnux/helpers/getStore.js delete mode 100644 examples/with-refnux/helpers/withRefnux.js delete mode 100644 examples/with-refnux/package.json delete mode 100644 examples/with-refnux/pages/page1.js delete mode 100644 examples/with-refnux/pages/page2.js delete mode 100644 examples/with-refnux/store/counterIncrement.js delete mode 100644 examples/with-refnux/store/getInitialState.js delete mode 100644 examples/with-refnux/store/getStore.js delete mode 100644 examples/with-refnux/store/setTitle.js diff --git a/examples/with-refnux/README.md b/examples/with-refnux/README.md deleted file mode 100644 index 79c2475b047bc..0000000000000 --- a/examples/with-refnux/README.md +++ /dev/null @@ -1,68 +0,0 @@ -# Refnux example - -This example, just like `with-redux` and `with-mobx` examples, shows how to manage a global state in your web-application. -In this case we are using [refnux](https://github.com/algesten/refnux) which is an alternative, simpler, purely functional store state manager. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-refnux) - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-refnux with-refnux-app -# or -yarn create next-app --example with-refnux with-refnux-app -``` - -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-refnux -cd with-refnux -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -## Notes - -We have two very similar pages (page1.js, page2.js). They both - -- show the current application state, including a simple counter value -- have a link to jump from one page to the other -- have an 'increment' button to increment the state of the counter - (it triggers the `counterIncrement` action) - -When running the example, please, increment the counter and note how moving from page 1 to page 2 and back the state is persisted. -Reloading any of the pages will restore the initial state coming from the server. - -### Implementation details - -Each page uses `withRefnux` helper which wraps the page in a Provider component. -Page components are connected to the state using refnux `connect` function. - -In the `store/` directory you can see a simple implmentation of - -- a `getInitialstate` function that returns the initial state of the store. It's used only on SSR -- a `counterIncrement` action that increments the counter state whe user pushes the corresponding button -- a `setTitle` action that's used to set page title during pages `getInitialProps` - -If you have any comment / question / pull requests please refer to the [original repository](https://github.com/davibe/next.js-example-with-refnux) where this example is developed and maintained. diff --git a/examples/with-refnux/helpers/getStore.js b/examples/with-refnux/helpers/getStore.js deleted file mode 100644 index d99b710915afc..0000000000000 --- a/examples/with-refnux/helpers/getStore.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createStore } from 'refnux' - -let storeMemoized = null - -const getStore = initialState => { - let store = null - if (typeof window === 'undefined') { - store = createStore(initialState) - } else { - if (!storeMemoized) { - storeMemoized = createStore(initialState) - } - store = storeMemoized - } - return store -} - -export default getStore diff --git a/examples/with-refnux/helpers/withRefnux.js b/examples/with-refnux/helpers/withRefnux.js deleted file mode 100644 index 0107d12580555..0000000000000 --- a/examples/with-refnux/helpers/withRefnux.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Provider } from 'refnux' -import getStore from './getStore' - -// The `withRefnux` "decorator" -// - wraps the given Component in a refnux Provider component -// - creates a `store` for the Provider handling different server side / client side cases -// - runs wrapped component `getInitialProps` as expected -// - passes `store` to Component's `getInitialProps` so that it can dispatch actions - -const withRefnux = (getInitialState, Component) => { - const Wrapper = props => { - var store = props.store - // if getInitialProps was executed on the server we get a store - // that's missing non-serializable functions. - // Because of this we need to recreate the store based on the - // state coming from the server. - if (!store.dispatch) { - store = getStore(props.store.state) - } - return ( - } - /> - ) - } - - Wrapper.getInitialProps = async function(context) { - const store = getStore(getInitialState()) - var componentProps = {} - // honor wrapped component getInitialProps - if (Component.getInitialProps) { - componentProps = await Component.getInitialProps({ ...context, store }) - } - return { store, componentProps } - } - - return Wrapper -} - -export default withRefnux diff --git a/examples/with-refnux/package.json b/examples/with-refnux/package.json deleted file mode 100644 index d75c68b85a55c..0000000000000 --- a/examples/with-refnux/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "with-refnux", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "license": "ISC", - "dependencies": { - "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "refnux": "^1.3.0" - } -} diff --git a/examples/with-refnux/pages/page1.js b/examples/with-refnux/pages/page1.js deleted file mode 100644 index 8e7172599a28d..0000000000000 --- a/examples/with-refnux/pages/page1.js +++ /dev/null @@ -1,29 +0,0 @@ -import { connect } from 'refnux' -import Link from 'next/link' - -import withRefnux from '../helpers/withRefnux' -import getInitialState from '../store/getInitialState' - -// actions -import counterIncrement from '../store/counterIncrement' -import setTitle from '../store/setTitle' - -const Page1 = connect((state, dispatch) => ( -
-

{state.title}

-

Current state: {JSON.stringify(state, null, 2)}

- - - - -
-)) - -Page1.getInitialProps = async function(context) { - const { store } = context - // dispatch actions to store to set it up for this page / route - store.dispatch(setTitle('Page 1')) - return {} // we have a store, we don't need props! -} - -export default withRefnux(getInitialState, Page1) diff --git a/examples/with-refnux/pages/page2.js b/examples/with-refnux/pages/page2.js deleted file mode 100644 index 041a1ffdc3e07..0000000000000 --- a/examples/with-refnux/pages/page2.js +++ /dev/null @@ -1,28 +0,0 @@ -import { connect } from 'refnux' -import Link from 'next/link' - -import withRefnux from '../helpers/withRefnux' -import getInitialState from '../store/getInitialState' - -// actions -import counterIncrement from '../store/counterIncrement' -import setTitle from '../store/setTitle' - -const Page2 = connect((state, dispatch) => ( -
-

{state.title}

-

Current state: {JSON.stringify(state, null, 2)}

- - - - -
-)) - -Page2.getInitialProps = async function(context) { - const { store } = context - store.dispatch(setTitle('Page 2')) - return {} -} - -export default withRefnux(getInitialState, Page2) diff --git a/examples/with-refnux/store/counterIncrement.js b/examples/with-refnux/store/counterIncrement.js deleted file mode 100644 index d656b01bfc82d..0000000000000 --- a/examples/with-refnux/store/counterIncrement.js +++ /dev/null @@ -1,5 +0,0 @@ -const counterIncrement = ({ counter }, dispatch) => { - return { counter: counter + 1 } -} - -export default counterIncrement diff --git a/examples/with-refnux/store/getInitialState.js b/examples/with-refnux/store/getInitialState.js deleted file mode 100644 index 24626dea37a12..0000000000000 --- a/examples/with-refnux/store/getInitialState.js +++ /dev/null @@ -1,8 +0,0 @@ -const getInitialState = () => { - return { - title: '', - counter: 0, - } -} - -export default getInitialState diff --git a/examples/with-refnux/store/getStore.js b/examples/with-refnux/store/getStore.js deleted file mode 100644 index 89ed4076d5037..0000000000000 --- a/examples/with-refnux/store/getStore.js +++ /dev/null @@ -1,16 +0,0 @@ -import { createStore } from 'refnux' - -const storeInitialState = { counter: 0, key: 'value' } - -const getStore = () => { - let store = null - if (typeof window === 'undefined') { - store = createStore(storeInitialState) - } else { - store = window.store || createStore(storeInitialState) - window.store = store - } - return store -} - -export default getStore diff --git a/examples/with-refnux/store/setTitle.js b/examples/with-refnux/store/setTitle.js deleted file mode 100644 index eb90567f14487..0000000000000 --- a/examples/with-refnux/store/setTitle.js +++ /dev/null @@ -1,5 +0,0 @@ -const setTitle = newTitle => ({ title }) => { - return { title: newTitle } -} - -export default setTitle From 44451516d6b69abb6bbb851c94f556d0ce194321 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 13:52:55 +0100 Subject: [PATCH 27/32] Remove example that can be created using api routes --- .../with-relay-modern-server-express/.babelrc | 8 --- .../with-relay-modern-server-express/.env | 1 - .../.gitignore | 2 - .../README.md | 46 --------------- .../components/BlogPostPreview.js | 22 ------- .../components/BlogPosts.js | 59 ------------------- .../lib/createRelayEnvironment.js | 48 --------------- .../lib/withData.js | 55 ----------------- .../next.config.js | 22 ------- .../package.json | 32 ---------- .../pages/index.js | 51 ---------------- .../server/db.js | 35 ----------- .../server/index.js | 36 ----------- .../server/rootValue.js | 8 --- .../server/schema.graphql | 36 ----------- 15 files changed, 461 deletions(-) delete mode 100644 examples/with-relay-modern-server-express/.babelrc delete mode 100644 examples/with-relay-modern-server-express/.env delete mode 100644 examples/with-relay-modern-server-express/.gitignore delete mode 100644 examples/with-relay-modern-server-express/README.md delete mode 100644 examples/with-relay-modern-server-express/components/BlogPostPreview.js delete mode 100644 examples/with-relay-modern-server-express/components/BlogPosts.js delete mode 100644 examples/with-relay-modern-server-express/lib/createRelayEnvironment.js delete mode 100644 examples/with-relay-modern-server-express/lib/withData.js delete mode 100644 examples/with-relay-modern-server-express/next.config.js delete mode 100644 examples/with-relay-modern-server-express/package.json delete mode 100644 examples/with-relay-modern-server-express/pages/index.js delete mode 100644 examples/with-relay-modern-server-express/server/db.js delete mode 100644 examples/with-relay-modern-server-express/server/index.js delete mode 100644 examples/with-relay-modern-server-express/server/rootValue.js delete mode 100644 examples/with-relay-modern-server-express/server/schema.graphql diff --git a/examples/with-relay-modern-server-express/.babelrc b/examples/with-relay-modern-server-express/.babelrc deleted file mode 100644 index c7eb72f9da570..0000000000000 --- a/examples/with-relay-modern-server-express/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "next/babel" - ], - "plugins": [ - ["relay", { artifactDirectory: "__generated__" }] - ] -} \ No newline at end of file diff --git a/examples/with-relay-modern-server-express/.env b/examples/with-relay-modern-server-express/.env deleted file mode 100644 index 997fabb476cc0..0000000000000 --- a/examples/with-relay-modern-server-express/.env +++ /dev/null @@ -1 +0,0 @@ -RELAY_SERVER=http://localhost:3000 diff --git a/examples/with-relay-modern-server-express/.gitignore b/examples/with-relay-modern-server-express/.gitignore deleted file mode 100644 index 748d4f6e39c57..0000000000000 --- a/examples/with-relay-modern-server-express/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -__generated__/ -schema/schema.graphql \ No newline at end of file diff --git a/examples/with-relay-modern-server-express/README.md b/examples/with-relay-modern-server-express/README.md deleted file mode 100644 index 38f4c6d229c25..0000000000000 --- a/examples/with-relay-modern-server-express/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# Relay Modern Server Express Example - -[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation. - -In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded. - -This example implements a simple graphql server using express, showing a custom graphql server integrated to next.js and relay modern. - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-relay-modern-server-express with-relay-modern-server-express-app -# or -yarn create next-app --example with-relay-modern-server-express with-relay-modern-server-express-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/canary | tar -xz --strip=2 next.js-canary/examples/with-relay-modern-server-express -cd with-relay-modern-server-express -``` - -Install it: - -```bash -npm install -# or -yarn -``` - -Run the project (it runs automatically the Relay ahead-of-time compilation) - -```bash -npm run dev -# or -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-relay-modern-server-express/components/BlogPostPreview.js b/examples/with-relay-modern-server-express/components/BlogPostPreview.js deleted file mode 100644 index 07746f7e1b641..0000000000000 --- a/examples/with-relay-modern-server-express/components/BlogPostPreview.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import { createFragmentContainer, graphql } from 'react-relay' - -const BlogPostPreview = props => { - return ( - -
{props.post.title}
-
{props.post.content}
-
- - ) -} - -export default createFragmentContainer(BlogPostPreview, { - post: graphql` - fragment BlogPostPreview_post on BlogPost { - id - title - content - } - `, -}) diff --git a/examples/with-relay-modern-server-express/components/BlogPosts.js b/examples/with-relay-modern-server-express/components/BlogPosts.js deleted file mode 100644 index d31e428707322..0000000000000 --- a/examples/with-relay-modern-server-express/components/BlogPosts.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react' -import { createFragmentContainer, graphql } from 'react-relay' -import BlogPostPreview from './BlogPostPreview' -import Router from 'next/router' - -const BlogPosts = props => { - let afterParam = props.viewer.allBlogPosts.pageInfo.endCursor - afterParam = afterParam ? `&after=${afterParam}` : '' - - let hasNextPage = props.viewer.allBlogPosts.pageInfo.hasNextPage - hasNextPage = hasNextPage || props.relayVariables.before - - let hasPrevPage = props.viewer.allBlogPosts.pageInfo.hasPreviousPage - hasPrevPage = hasPrevPage || props.relayVariables.after - - let beforeParam = props.viewer.allBlogPosts.pageInfo.startCursor - beforeParam = beforeParam ? `&before=${beforeParam}` : '' - - const nextOnClick = () => Router.push(`/?first=2${afterParam}`) - const prevOnClick = () => Router.push(`/?last=2${beforeParam}`) - - return ( -
-

Blog posts

- {props.viewer.allBlogPosts.edges.map(({ node }) => ( - - ))} -
- -   - -
- ) -} - -export default createFragmentContainer(BlogPosts, { - viewer: graphql` - fragment BlogPosts_viewer on Viewer { - allBlogPosts { - pageInfo { - hasNextPage - hasPreviousPage - startCursor - endCursor - } - edges { - node { - ...BlogPostPreview_post - id - } - } - } - } - `, -}) diff --git a/examples/with-relay-modern-server-express/lib/createRelayEnvironment.js b/examples/with-relay-modern-server-express/lib/createRelayEnvironment.js deleted file mode 100644 index ceeab16760ed8..0000000000000 --- a/examples/with-relay-modern-server-express/lib/createRelayEnvironment.js +++ /dev/null @@ -1,48 +0,0 @@ -import { Environment, Network, RecordSource, Store } from 'relay-runtime' -import fetch from 'isomorphic-unfetch' - -let relayEnvironment = null - -// Define a function that fetches the results of an operation (query/mutation/etc) -// and returns its results as a Promise: -function fetchQuery(operation, variables, cacheConfig, uploadables) { - // Because we implement the graphql server, the client must to point to the same host - const relayServer = - typeof window !== 'undefined' ? '' : process.env.RELAY_SERVER - return fetch(`${relayServer}/graphql`, { - method: 'POST', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, // Add authentication and other headers here - body: JSON.stringify({ - query: operation.text, // GraphQL text from input - variables, - }), - }).then(response => response.json()) -} - -export default function initEnvironment({ records = {} } = {}) { - // Create a network layer from the fetch function - const network = Network.create(fetchQuery) - const store = new Store(new RecordSource(records)) - - // Make sure to create a new Relay environment for every server-side request so that data - // isn't shared between connections (which would be bad) - if (typeof window === 'undefined') { - return new Environment({ - network, - store, - }) - } - - // reuse Relay environment on client-side - if (!relayEnvironment) { - relayEnvironment = new Environment({ - network, - store, - }) - } - - return relayEnvironment -} diff --git a/examples/with-relay-modern-server-express/lib/withData.js b/examples/with-relay-modern-server-express/lib/withData.js deleted file mode 100644 index 6b04b20365dcd..0000000000000 --- a/examples/with-relay-modern-server-express/lib/withData.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' -import initEnvironment from './createRelayEnvironment' -import { fetchQuery, ReactRelayContext } from 'react-relay' - -export default (ComposedComponent, options = {}) => { - return class WithData extends React.Component { - static displayName = `WithData(${ComposedComponent.displayName})` - - static async getInitialProps(ctx) { - // Evaluate the composed component's getInitialProps() - let composedInitialProps = {} - if (ComposedComponent.getInitialProps) { - composedInitialProps = await ComposedComponent.getInitialProps(ctx) - } - - let queryProps = {} - let queryRecords = {} - const environment = initEnvironment() - - if (options.query) { - const variables = composedInitialProps.relayVariables || {} - // TODO: Consider RelayQueryResponseCache - // https://github.com/facebook/relay/issues/1687#issuecomment-302931855 - queryProps = await fetchQuery(environment, options.query, variables) - queryRecords = environment - .getStore() - .getSource() - .toJSON() - } - - return { - ...composedInitialProps, - ...queryProps, - queryRecords, - } - } - - constructor(props) { - super(props) - this.environment = initEnvironment({ - records: props.queryRecords, - }) - } - - render() { - return ( - - - - ) - } - } -} diff --git a/examples/with-relay-modern-server-express/next.config.js b/examples/with-relay-modern-server-express/next.config.js deleted file mode 100644 index 6719eff1134f3..0000000000000 --- a/examples/with-relay-modern-server-express/next.config.js +++ /dev/null @@ -1,22 +0,0 @@ -require('dotenv').config() - -const path = require('path') -const Dotenv = require('dotenv-webpack') - -module.exports = { - webpack: config => { - config.plugins = config.plugins || [] - - config.plugins = [ - ...config.plugins, - - // Read the .env file - new Dotenv({ - path: path.join(__dirname, '.env'), - systemvars: true, - }), - ] - - return config - }, -} diff --git a/examples/with-relay-modern-server-express/package.json b/examples/with-relay-modern-server-express/package.json deleted file mode 100644 index a4519dd2c9c75..0000000000000 --- a/examples/with-relay-modern-server-express/package.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "with-relay-modern-server-express", - "version": "1.0.0", - "description": "Example of Next.js with Relay Modern SSR and a Graphql Server with Express", - "scripts": { - "predev": "npm run relay", - "dev": "node server", - "build": "next build", - "prestart": "npm run build", - "start": "NODE_ENV=production node server", - "relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**' '**/__generated__/**' '**/server/**' --schema ./server/schema.graphql --artifactDirectory __generated__ --verbose" - }, - "author": "", - "license": "ISC", - "dependencies": { - "dotenv": "^4.0.0", - "dotenv-webpack": "^1.5.4", - "express-graphql": "^0.9.0", - "graphql": "^14.6.0", - "graphql-relay": "^0.6.0", - "isomorphic-unfetch": "^3.0.0", - "next": "latest", - "react": "^16.13.0", - "react-dom": "^16.13.0", - "react-relay": "^9.0.0" - }, - "devDependencies": { - "babel-plugin-relay": "^9.0.0", - "graphql-cli": "^1.0.0-beta.4", - "relay-compiler": "^9.0.0" - } -} diff --git a/examples/with-relay-modern-server-express/pages/index.js b/examples/with-relay-modern-server-express/pages/index.js deleted file mode 100644 index 22c2034a4ce86..0000000000000 --- a/examples/with-relay-modern-server-express/pages/index.js +++ /dev/null @@ -1,51 +0,0 @@ -import React, { Component } from 'react' -import { graphql } from 'react-relay' -import withData from '../lib/withData' -import BlogPosts from '../components/BlogPosts' - -class Index extends Component { - static displayName = `Index` - - static async getInitialProps(context) { - let { after, before, first, last } = context.query - - if (last === undefined) { - first = 2 - } - - return { - relayVariables: { - after, - before, - first: parseInt(first, 10), - last: parseInt(last, 10), - }, - } - } - - render(props) { - return ( -
- -
- ) - } -} - -export default withData(Index, { - query: graphql` - query pages_indexQuery( - $after: String - $before: String - $first: Int - $last: Int - ) { - viewer(after: $after, before: $before, first: $first, last: $last) { - ...BlogPosts_viewer - } - } - `, -}) diff --git a/examples/with-relay-modern-server-express/server/db.js b/examples/with-relay-modern-server-express/server/db.js deleted file mode 100644 index 5aaf177ec0ac3..0000000000000 --- a/examples/with-relay-modern-server-express/server/db.js +++ /dev/null @@ -1,35 +0,0 @@ -module.exports = { - id: 'viewer', - blogPosts: [ - { - id: 'p1', - title: 'Title 1', - content: 'Lorem Ipsum 1', - }, - { - id: 'p2', - title: 'Title 2', - content: 'Lorem Ipsum 2', - }, - { - id: 'p3', - title: 'Title 3', - content: 'Lorem Ipsum 3', - }, - { - id: 'p4', - title: 'Title 4', - content: 'Lorem Ipsum 4', - }, - { - id: 'p5', - title: 'Title 5', - content: 'Lorem Ipsum 5', - }, - { - id: 'p6', - title: 'Title 6', - content: 'Lorem Ipsum 6', - }, - ], -} diff --git a/examples/with-relay-modern-server-express/server/index.js b/examples/with-relay-modern-server-express/server/index.js deleted file mode 100644 index a4cfe89138d3b..0000000000000 --- a/examples/with-relay-modern-server-express/server/index.js +++ /dev/null @@ -1,36 +0,0 @@ -const express = require('express') -const graphqlHTTP = require('express-graphql') -const next = require('next') -const path = require('path') -const fs = require('fs') -const { buildSchema } = require('graphql') -const rootValue = require('./rootValue') -const port = parseInt(process.env.PORT, 10) || 3000 -const dev = process.env.NODE_ENV !== 'production' -const app = next({ dev }) -const handle = app.getRequestHandler() -const schemaPath = path.join(__dirname, '/schema.graphql') -const schemaContent = fs.readFileSync(schemaPath).toString() -const graphqlSchema = buildSchema(schemaContent) - -app.prepare().then(() => { - const server = express() - - server.use( - '/graphql', - graphqlHTTP({ - schema: graphqlSchema, - graphiql: false, - rootValue: rootValue, - }) - ) - - server.get('*', (req, res) => { - return handle(req, res) - }) - - server.listen(port, err => { - if (err) throw err - console.log(`> Ready on http://localhost:${port}`) - }) -}) diff --git a/examples/with-relay-modern-server-express/server/rootValue.js b/examples/with-relay-modern-server-express/server/rootValue.js deleted file mode 100644 index 930293b793e03..0000000000000 --- a/examples/with-relay-modern-server-express/server/rootValue.js +++ /dev/null @@ -1,8 +0,0 @@ -const gqr = require('graphql-relay') -const db = require('./db') -const viewer = variables => ({ - id: db.id, - allBlogPosts: gqr.connectionFromArray(db.blogPosts, variables), -}) - -module.exports = { viewer } diff --git a/examples/with-relay-modern-server-express/server/schema.graphql b/examples/with-relay-modern-server-express/server/schema.graphql deleted file mode 100644 index 86fa2198e9450..0000000000000 --- a/examples/with-relay-modern-server-express/server/schema.graphql +++ /dev/null @@ -1,36 +0,0 @@ -type Query { - viewer(after: String, before: String, first: Int, last: Int): Viewer! - node(id: ID!): Node -} - -type Viewer implements Node { - id: ID! - allBlogPosts(after: String, before: String, first: Int, last: Int): BlogPostConnection! -} - -interface Node { - id: ID! -} - -type BlogPostConnection { - pageInfo: PageInfo! - edges: [BlogPostEdge] -} - -type PageInfo { - hasNextPage: Boolean! - hasPreviousPage: Boolean! - startCursor: String - endCursor: String -} - -type BlogPostEdge { - node: BlogPost! - cursor: String! -} - -type BlogPost implements Node { - content: String! - id: ID! - title: String! -} From 5e9e540bfae05846b7b8eaf7fa6e02da458d4cf3 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 17 Mar 2020 14:00:53 +0100 Subject: [PATCH 28/32] Update with-segment-analytics --- examples/with-segment-analytics/pages/_app.js | 30 +++++-------------- .../with-segment-analytics/pages/_document.js | 11 ++----- 2 files changed, 11 insertions(+), 30 deletions(-) diff --git a/examples/with-segment-analytics/pages/_app.js b/examples/with-segment-analytics/pages/_app.js index d29ced69775c4..3146744d4b738 100644 --- a/examples/with-segment-analytics/pages/_app.js +++ b/examples/with-segment-analytics/pages/_app.js @@ -1,25 +1,11 @@ -import React from 'react' import Page from '../components/Page' -import App from 'next/app' -export default class MyApp extends App { - static async getInitialProps({ Component, router, ctx }) { - let pageProps = {} - - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx) - } - - return { pageProps } - } - - render() { - const { Component, pageProps } = this.props - - return ( - - - - ) - } +function MyApp({ Component, pageProps }) { + return ( + + + + ) } + +export default MyApp diff --git a/examples/with-segment-analytics/pages/_document.js b/examples/with-segment-analytics/pages/_document.js index dea05dfb730f4..91a50b498305b 100644 --- a/examples/with-segment-analytics/pages/_document.js +++ b/examples/with-segment-analytics/pages/_document.js @@ -1,5 +1,5 @@ import React from 'react' -import Document, { Head, Main, NextScript } from 'next/document' +import Document, { Html, Head, Main, NextScript } from 'next/document' import * as snippet from '@segment/snippet' const { @@ -9,11 +9,6 @@ const { } = process.env export default class extends Document { - static getInitialProps({ renderPage }) { - const { html, head, errorHtml, chunks } = renderPage() - return { html, head, errorHtml, chunks } - } - renderSnippet() { const opts = { apiKey: ANALYTICS_WRITE_KEY, @@ -31,7 +26,7 @@ export default class extends Document { render() { return ( - + {/* Inject the Segment snippet into the of the document */}