Add assetPrefix support to add support for CDNs.

Author: arunoda

client/index.js

@@ -23,12 +23,13 @@ const {
     err,
     pathname,
     query,
-    buildId
+    buildId,
+    assetPrefix
   },
   location
 } = window
 
-const pageLoader = new PageLoader(buildId)
+const pageLoader = new PageLoader(buildId, assetPrefix)
 window.__NEXT_LOADED_PAGES__.forEach(({ route, fn }) => {
   pageLoader.registerPage(route, fn)
 })

lib/page-loader.js

@@ -4,8 +4,10 @@ import mitt from 'mitt'
 const webpackModule = module
 
 export default class PageLoader {
-  constructor (buildId) {
+  constructor (buildId, assetPrefix) {
     this.buildId = buildId
+    this.assetPrefix = assetPrefix
+
     this.pageCache = {}
     this.pageLoadedHandlers = {}
     this.registerEvents = mitt()
@@ -56,7 +58,7 @@ export default class PageLoader {
     route = this.normalizeRoute(route)
 
     const script = document.createElement('script')
-    const url = `/_next/${encodeURIComponent(this.buildId)}/page${route}`
+    const url = `${this.assetPrefix}/_next/${encodeURIComponent(this.buildId)}/page${route}`
     script.src = url
     script.type = 'text/javascript'
     script.onerror = () => {

readme.md

@@ -33,6 +33,7 @@ Next.js is a minimalistic framework for server-rendered React applications.
   - [Custom configuration](#custom-configuration)
   - [Customizing webpack config](#customizing-webpack-config)
   - [Customizing babel config](#customizing-babel-config)
+  - [CDN support with Asset Prefix](#cdn-support-with-asset-prefix)
 - [Production deployment](#production-deployment)
 - [FAQ](#faq)
 - [Roadmap](#roadmap)
@@ -700,6 +701,22 @@ Here's an example `.babelrc` file:
 }
 ```
 
+### CDN support with Asset Prefix
+
+Sometimes, it's a pretty good idea to serve Next.js static assets via a CDN. You can easily do that by exposing the following option via `next.config.js`.
+
+```js
+const isProd = process.NODE_ENV === 'production'
+module.exports = {
+  // You may only need to add assetPrefix in the production.
+  assetPrefix: isProd? 'https://cdn.mydomain.com' : ''
+}
+```
+
+Then inside your CDN configuration, set the origin URL as your app's domain name. That's all you've to.
+
+> With this setup, you can't add CDN support for static assets in the 'static' directory. This is only for core Next.js assets.
+
 ## Production deployment
 
 To deploy, instead of running `next`, you want to build for production usage ahead of time. Therefore, building and starting are separate commands:

server/config.js

@@ -6,7 +6,8 @@ const cache = new Map()
 const defaultConfig = {
   webpack: null,
   poweredByHeader: true,
-  distDir: '.next'
+  distDir: '.next',
+  assetPrefix: ''
 }
 
 export default function getConfig (dir) {

server/document.js

@@ -66,13 +66,13 @@ export class NextScript extends Component {
 
   getChunkScript (filename, additionalProps = {}) {
     const { __NEXT_DATA__ } = this.context._documentProps
-    let { buildStats } = __NEXT_DATA__
+    let { buildStats, assetPrefix } = __NEXT_DATA__
     const hash = buildStats ? buildStats[filename].hash : '-'
 
     return (
       <script
         type='text/javascript'
-        src={`/_next/${hash}/${filename}`}
+        src={`${assetPrefix}/_next/${hash}/${filename}`}
         {...additionalProps}
       />
     )
@@ -97,7 +97,7 @@ export class NextScript extends Component {
 
   render () {
     const { staticMarkup, __NEXT_DATA__ } = this.context._documentProps
-    const { pathname, buildId } = __NEXT_DATA__
+    const { pathname, buildId, assetPrefix } = __NEXT_DATA__
 
     return <div>
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
@@ -111,8 +111,8 @@ export class NextScript extends Component {
           }
         `
       }} />}
-      <script async type='text/javascript' src={`/_next/${buildId}/page${pathname}`} />
-      <script async type='text/javascript' src={`/_next/${buildId}/page/_error`} />
+      <script async type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page${pathname}`} />
+      <script async type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page/_error`} />
       {staticMarkup ? null : this.getScripts()}
     </div>
   }

server/index.js

@@ -36,7 +36,8 @@ export default class Server {
       dir: this.dir,
       hotReloader: this.hotReloader,
       buildStats: this.buildStats,
-      buildId: this.buildId
+      buildId: this.buildId,
+      assetPrefix: this.config.assetPrefix.replace(/\/$/, '')
     }
 
     this.defineRoutes()

server/render.js

@@ -35,6 +35,7 @@ async function doRender (req, res, pathname, query, {
   buildId,
   buildStats,
   hotReloader,
+  assetPrefix,
   dir = process.cwd(),
   dev = false,
   staticMarkup = false
@@ -93,6 +94,7 @@ async function doRender (req, res, pathname, query, {
       query,
       buildId,
       buildStats,
+      assetPrefix,
       err: (err && dev) ? errorToJSON(err) : null
     },
     dev,