added with-noscript example (#2767)

examples/with-noscript/README.md

@@ -0,0 +1,47 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-noscript)
+
+# Noscript example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+## Development
+Install it and run:
+
+**npm**
+```bash
+npm install
+npm run dev
+```
+
+**yarn**
+```bash
+yarn install
+yarn run dev
+```
+
+## Production
+**npm**
+```bash
+npm install
+npm run build
+npm start
+```
+
+**yarn**
+```bash
+yarn install
+yarn run build
+yarn start
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## About example
+
+This example show you how to use `<noscript></noscript>` with image resource in next.js

examples/with-noscript/components/Noscript.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/lib/ReactDOMServer'
+
+export default function Noscript (props) {
+  const staticMarkup = ReactDOMServer.renderToStaticMarkup(props.children)
+  return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />
+}

examples/with-noscript/next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  webpack: (config, { dev }) => {
+    if (!dev) {
+      config.resolve.alias = {
+        'react-dom/server': require.resolve('react-dom/dist/react-dom-server.min.js')
+      }
+    }
+    return config
+  }
+}

examples/with-noscript/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-noscript",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^3.0.3",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-lazyload": "^2.2.7"
+  },
+  "license": "ISC"
+}

examples/with-noscript/pages/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import LazyLoad from 'react-lazyload'
+import Noscript from '../components/Noscript'
+
+const images = [
+  '/static/img/reactjs.png',
+  '/static/img/nextjs.png',
+  '/static/img/vuejs.png',
+  '/static/img/angular.jpg'
+]
+
+class Index extends React.Component {
+  static getInitialProps (context) {
+    const { isServer } = context
+    return { isServer }
+  }
+  render () {
+    return (
+      <div style={{ textAlign: 'center' }}>
+        {
+          images.map((item, index) =>
+            <div key={index}>
+              <LazyLoad height={700} offset={100}>
+                <img width={700} height={700} src={item} alt={`image_${index}`} />
+              </LazyLoad>
+              <Noscript>
+                <img width={700} height={700} src={item} alt={`image_${index}`} />
+              </Noscript>
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+}
+
+export default Index