Example: with absolute imports (vercel#2863)

sergiodxa · timneutkens · commit fd198d28a82f · 2017-08-30T20:03:36.000+02:00
* Add with-absolute-imports example

* Fix examples repo urls to point to master instead of v3-beta
diff --git a/examples/with-absolute-imports/.babelrc b/examples/with-absolute-imports/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": "next/babel",
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["./"],
+        "alias": {
+          "components": "./components"
+        }
+      }
+    ]
+  ]
+}
diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md
@@ -0,0 +1,27 @@
+# Example app with absolute imports
+
+## 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-absolute-import
+cd with-absolute-import
+```
+
+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 configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
diff --git a/examples/with-absolute-imports/components/header.js b/examples/with-absolute-imports/components/header.js
@@ -0,0 +1,5 @@
+export default () => (
+  <header>
+    <h1>Hello world!</h1>
+  </header>
+)
diff --git a/examples/with-absolute-imports/package.json b/examples/with-absolute-imports/package.json
@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "babel-plugin-module-resolver": "^2.7.1",
+    "next": "^3.0.6",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  }
+}
diff --git a/examples/with-absolute-imports/pages/index.js b/examples/with-absolute-imports/pages/index.js
@@ -0,0 +1,7 @@
+import Header from 'components/header.js'
+
+export default () => (
+  <div>
+    <Header />
+  </div>
+)
diff --git a/examples/with-apollo-auth/README.md b/examples/with-apollo-auth/README.md
@@ -10,7 +10,7 @@ https://next-with-apollo-auth.now.sh
 Download the example [or clone the repo](https://github.com/zeit/next.js):
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-apollo-auth
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-apollo-auth
 cd with-apollo-auth
 ```
 
@@ -32,13 +32,13 @@ now
 This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:
 
 > [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
-> 
+>
 > In this simple example, we integrate Apollo 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 central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
-> 
+>
 > On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method,  [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
-> 
+>
 > This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
-> 
+>
 > *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.*
 
 [graph.cool](https://www.graph.cool) can be setup with many different
diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md
@@ -5,7 +5,7 @@
 Download the example [or clone the repo](https://github.com/zeit/next.js):
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-dynamic-import
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-dynamic-import
 cd with-dynamic-import
 ```
 
