Example: hashed statics (#2891)

* Add hashed statics example

* Fix linting

examples/with-hashed-statics/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "transform-assets",
+      {
+        "extensions": ["txt", "svg", "png"],
+        "name": "/static/[name].[ext]?[sha512:hash:base64:7]"
+      }
+    ]
+  ]
+}

examples/with-hashed-statics/README.md

@@ -0,0 +1,31 @@
+# Example app with imported and hashed statics
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-hashed-statics
+cd with-hashed-statics
+```
+
+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 import images, videos, etc. from `/static` and get the URL with a hash query allowing to use better cache without problems.
+
+This example supports `.svg`, `.png` and `.txt` extensions, but it can be configured to support any possible extension changing the `extensions` array in the `.babelrc` file.
+
+We also can modify the filename we're going to get, that filename has `/static` prepended so every file we require using this is going to have the format `/static/[name].[ext]?[hash]`, because of this all the files need to be placed directly inside the `static` directory.

examples/with-hashed-statics/package.json

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next"
+  },
+  "dependencies": {
+    "babel-plugin-transform-assets": "^0.2.0",
+    "next": "^3.2.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  }
+}

examples/with-hashed-statics/pages/index.js

@@ -0,0 +1,19 @@
+// We need to use `require` instead of `import`
+// They also must be assigned to a variable/constant
+const logoSVG = require('../static/logo.svg')
+const logoPNG = require('../static/logo.png')
+const txt = require('../static/file.txt')
+
+export default () => (
+  <div>
+    <strong>{txt}</strong>
+    <br />
+    <img src={logoSVG} alt='Logo SVG' width='305' />
+    <br />
+    <strong>{logoSVG}</strong>
+    <br />
+    <img src={logoPNG} alt='Logo PNG' width='305' />
+    <br />
+    <strong>{logoPNG}</strong>
+  </div>
+)

examples/with-hashed-statics/static/logo.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="295px" height="178px" viewBox="0 0 295 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="next-black" transform="translate(-123.000000, -136.000000)" fill="#000000">
+            <g id="Group" transform="translate(123.000000, 135.000000)">
+                <g id="EXT-+-Type-something">
+                    <path d="M69.7485407,47.7290323 L125.269767,47.7290323 L125.269767,52.1419355 L74.8379864,52.1419355 L74.8379864,85.3548387 L122.262367,85.3548387 L122.262367,89.7677419 L74.8379864,89.7677419 L74.8379864,126.232258 L125.848113,126.232258 L125.848113,130.645161 L69.7485407,130.645161 L69.7485407,47.7290323 Z M130.243544,47.7290323 L136.142674,47.7290323 L162.283918,84.1935484 L189.003508,47.7290323 L225.346507,1.41071165 L165.638325,88.0258065 L196.406338,130.645161 L190.27587,130.645161 L162.283918,91.8580645 L134.176297,130.645161 L128.161498,130.645161 L159.160849,88.0258065 L130.243544,47.7290323 Z M198.604054,52.1419354 L198.604054,47.7290323 L261.875118,47.7290323 L261.875118,52.1419355 L232.726474,52.1419355 L232.726474,130.645161 L227.637028,130.645161 L227.637028,52.1419355 L198.604054,52.1419354 Z" id="EXT"></path>
+                    <polygon id="Type-something" points="0.289190704 47.7290323 6.6509979 47.7290323 94.3765964 179.00202 58.1238016 130.645161 5.6099749 54 5.37863646 130.645161 0.289190704 130.645161"></polygon>
+                </g>
+                <path d="M261.362336,124.900538 C262.414525,124.900538 263.182004,124.094874 263.182004,123.053709 C263.182004,122.012543 262.414525,121.206879 261.362336,121.206879 C260.322526,121.206879 259.542668,122.012543 259.542668,123.053709 C259.542668,124.094874 260.322526,124.900538 261.362336,124.900538 Z M266.363328,120.041764 C266.363328,123.115683 268.579114,125.123645 271.809953,125.123645 C275.251229,125.123645 277.330849,123.053709 277.330849,119.459207 L277.330849,106.804084 L274.558022,106.804084 L274.558022,119.446812 C274.558022,121.44238 273.555348,122.508336 271.785195,122.508336 C270.200723,122.508336 269.123776,121.516749 269.08664,120.041764 L266.363328,120.041764 Z M280.957806,119.880632 C281.155866,123.078498 283.817284,125.123645 287.778466,125.123645 C292.011979,125.123645 294.661019,122.97934 294.661019,119.558366 C294.661019,116.868687 293.150819,115.381308 289.486726,114.526064 L287.518514,114.042666 C285.191319,113.497293 284.250539,112.765998 284.250539,111.489331 C284.250539,109.878002 285.711224,108.824442 287.902253,108.824442 C289.981873,108.824442 291.417802,109.853213 291.677754,111.501725 L294.376309,111.501725 C294.215386,108.489781 291.566346,106.370265 287.939389,106.370265 C284.040101,106.370265 281.440575,108.489781 281.440575,111.675253 C281.440575,114.302957 282.91364,115.864706 286.144479,116.620791 L288.446915,117.178558 C290.811246,117.736326 291.851056,118.554385 291.851056,119.917816 C291.851056,121.504355 290.217069,122.657074 287.988904,122.657074 C285.599816,122.657074 283.941071,121.578724 283.705876,119.880632 L280.957806,119.880632 Z" id=".JS"></path>
+            </g>
+        </g>
+    </g>
+</svg>