only-client-render-external-dependencies example

examples/only-client-render-external-dependencies/README.md

@@ -0,0 +1,27 @@
+# Hello World example
+
+## Only client render for external dependencies
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/only-client-render-external-dependencies
+cd only-client-render-external-dependencies
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to use an external dependency that only allows client-render.

examples/only-client-render-external-dependencies/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "only-client-render-external-dependencies",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "recharts": "^1.0.0-beta.0"
+  },
+  "license": "ISC"
+}

examples/only-client-render-external-dependencies/pages/chart.js

@@ -0,0 +1,44 @@
+import React from 'react'
+let LineChart
+let Line
+class Chart extends React.Component {
+  constructor () {
+    super();
+    this.state = {
+      chart: false,
+      data: [
+        {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+        {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+        {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+        {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+        {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+        {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+        {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+      ]
+    }
+  }
+
+  componentDidMount() {
+    LineChart = require('recharts').LineChart;
+    Line = require('recharts').Line;
+
+    this.setState({
+      chart: true
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <h1>Another chart</h1>
+        {this.state.chart == true &&
+          <LineChart width={400} height={400} data={this.state.data}>
+            <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+          </LineChart>
+        }
+      </div>
+    )
+  }
+}
+
+export default Chart

examples/only-client-render-external-dependencies/pages/index.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import Link from 'next/link'
+let LineChart
+let Line
+
+class Index extends React.Component {
+  constructor () {
+    super();
+    this.state = {
+      chart: false,
+      data: [
+        {name: 'Page A', uv: 1000, pv: 2400, amt: 2400},
+        {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+        {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+        {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+        {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+        {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+        {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+      ]
+    }
+  }
+
+  componentDidMount() {
+    LineChart = require('recharts').LineChart;
+    Line = require('recharts').Line;
+
+    this.setState({
+      chart: true
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <h1>Chart</h1>
+        <Link href='/chart'><a>Go to another chart</a></Link>
+        {this.state.chart == true &&
+          <LineChart width={400} height={400} data={this.state.data}>
+            <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+          </LineChart>
+        }
+      </div>
+    )
+  }
+}
+
+export default Index