[WIP] Add support for transpile packages installed via NPM

README.md

@@ -522,6 +522,36 @@ Here's an example `.babelrc` file:
 }
 ```
 
+### Transpile NPM modules
+
+<p><details>
+  <summary><b>Examples</b></summary>
+  <ul><li><a href="./examples/with-es6-npm-module-pages">Transpile NPM modules</a></li></ul>
+</details></p>
+
+By default, Next.js won't transpile any NPM modules installed into your app's `node_modules` directory.
+But you could ask to do so. With that, you could publish modules(specially component libraries) into NPM without transpiling. Then you can ask Next.js to do the transpiling.
+
+This will simplify your workflow on creating sharable components libraries and use those across teams. Additionally, you'll get chance to use the new Webpack features like tree-shaking.
+
+**Step to do that:**
+
+Add a field called `transpileModules` with an array of regexp patterns like this:
+
+```js
+module.exports = {
+  transpileModules : [
+    /react-button/
+  ]
+}
+```
+
+Here Next.js checks every imported module with above patterns and transpile them if matched. By default it uses `next/babel` preset, but you can use a `.babelrc` file to customize it as you want.
+
+In the above example, Next.js will transpile any module inside the `node_modules` directory which has "react-button" in it's pathname.
+
+> Note: Currently, Next.js only supports modules installed into `node_modules`. So, transpiling modules installed with `npm link <my-comp-name>` doesn't work well.
+
 ## Production deployment
 
 To deploy, instead of running `next`, you probably want to build ahead of time. Therefore, building and starting are separate commands:

examples/transpile-npm-modules/README.md

@@ -0,0 +1,48 @@
+
+# Hello World example
+
+## How to use
+
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-es6-npm-module-pages
+cd with-es6-npm-module-pages
+```
+
+Install it and run:
+
+```bash
+cd app
+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 transpile modules installed with NPM. With that, you could publish internal component libraries to NPM without transpiling and use them directly inside your Next.js app.
+
+> By default those components get transpiled with the `next/babel` preset. You could also define a custom .babelrc in your app and define presets and plugins as you want.
+
+You can do this by adding a field called `transpileModules` in the `next.config.js`. Here's an example config:
+
+```js
+module.exports = {
+  // You need to define an array of regular expressions here
+  transpileModules: [
+    /react-button/
+  ]
+}
+```
+
+Here Next.js will transpile any module matches "react-button" in it's path name.
+
+### Note
+
+We only transpile modules inside the `node_modules` directory. So, `npm link` won't work in this case.

examples/transpile-npm-modules/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  transpileModules: [
+    /react-button/
+  ]
+}

examples/transpile-npm-modules/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "with-es6-npm-module-pages",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@kadira/react-button": "^1.0.2",
+    "next": "^2.0.0-beta"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/transpile-npm-modules/pages/about.js

@@ -0,0 +1,3 @@
+export default () => (
+  <div>About us</div>
+)

examples/transpile-npm-modules/pages/index.js

@@ -0,0 +1,16 @@
+/* globals alert */
+
+import Link from 'next/link'
+import Button from '@kadira/react-button/src'
+
+export default () => (
+  <div>
+    <p>
+      Hello World. <Link href='/about'>About</Link>
+    </p>
+
+    <Button onClick={() => alert('Hello!')}>
+      Say Hello
+    </Button>
+  </div>
+)