Add support for using .babelrc in the app root.

README.md

@@ -458,28 +458,20 @@ module.exports = {
 
 ### Customizing babel config
 
-In order to extend our usage of `babel`, you can define a function that extends its config via `next.config.js`.
-
-The following example config shows you how to use `babel-preset-stage-0` with your app.
+In order to extend our usage of `babel`, you can simply define a `.babelrc` file in the root of your app.
+If found, we'll use it. Here's an example `.babelrc` file:
 
 ```js
-// This file is not going through babel transformation.
-// So, we write it in vanilla JS
-// (But you could use ES2015 features supported by your Node.js version)
-
-module.exports = {
-  // config is the set of options we pass to our babel-loaders's query option
-  babel: function (config, { dev }) {
-    // Add the stage-0 preset.
-    // Make sure to use 'require.resolve' otherwise we won't be able to find it.
-    config.presets.push(require.resolve('babel-preset-stage-0'))
-
-    // Important: return the modified config
-    return config
-  }
+{
+  "presets": [
+    "next/babel",
+    "stage-0"
+  ],
 }
 ```
 
+Although it's not required, you will need to add `next/babel` as a preset. That's the default preset we use for all Next.js apps.
+
 ## Production deployment
 
 To deploy, instead of running `next`, you probably want to build ahead of time. Therefore, building and starting are separate commands:

examples/with-custom-babel-config/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "next/babel",
+    "stage-0"
+  ],
+}

examples/with-custom-babel-config/README.md

@@ -26,6 +26,9 @@ This example features:
 
 * An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/).
 * It uses babel-preset-stage-0, which allows us to use above JavaScript feature.
+* It uses '.babelrc' file in the app directory to add above preset.
+
+> Most of the time, when writing a custom `.babelrc` file, you need to add `next/babel` as a preset.
 
 ## How to run it
 

server/build/babel/index.js

@@ -1,15 +1,14 @@
 import { resolve, join, dirname } from 'path'
+import { existsSync } from 'fs'
 import { readFile, writeFile } from 'mz/fs'
 import { transform } from 'babel-core'
 import chokidar from 'chokidar'
 import mkdirp from 'mkdirp-then'
-import getConfig from '../../config'
 
 export default babel
 
 async function babel (dir, { dev = false } = {}) {
   dir = resolve(dir)
-  const config = getConfig('../')
 
   let src
   try {
@@ -23,14 +22,14 @@ async function babel (dir, { dev = false } = {}) {
   }
 
   let babelOptions = {
-    babelrc: false,
+    babelrc: true,
     sourceMaps: dev ? 'inline' : false,
-    presets: [require.resolve('./preset')]
+    presets: []
   }
 
-  if (config.babel) {
-    console.log('> Using "babel" config function defined in next.config.js.')
-    babelOptions = await config.babel(babelOptions, { dev })
+  const hasBabelRc = existsSync(join(dir, '.babelrc'))
+  if (!hasBabelRc) {
+    babelOptions.presets.push(require.resolve('./preset'))
   }
 
   const { code } = transform(src, babelOptions)

server/build/webpack.js

@@ -1,5 +1,6 @@
 import { resolve, join } from 'path'
 import { createHash } from 'crypto'
+import { existsSync } from 'fs'
 import webpack from 'webpack'
 import glob from 'glob-promise'
 import WriteFilePlugin from 'write-file-webpack-plugin'
@@ -84,18 +85,18 @@ export default async function createCompiler (dir, { dev = false, quiet = false
     )
   }
 
-  let mainBabelOptions = {
-    babelrc: false,
+  const mainBabelOptions = {
+    babelrc: true,
     cacheDirectory: true,
     sourceMaps: dev ? 'both' : false,
-    presets: [
-      require.resolve('./babel/preset')
-    ]
+    presets: []
   }
 
-  if (config.babel) {
-    console.log('> Using "babel" config function defined in next.config.js.')
-    mainBabelOptions = await config.babel(mainBabelOptions, { dev })
+  const hasBabelRc = existsSync(join(dir, '.babelrc'))
+  if (hasBabelRc) {
+    console.log('> Using .babelrc defined in your app root')
+  } else {
+    mainBabelOptions.presets.push(require.resolve('./babel/preset'))
   }
 
   const loaders = (dev ? [{