diff --git a/components/ReadNext.cjsx b/components/ReadNext.cjsx
deleted file mode 100644
index 4d49aeb..0000000
--- a/components/ReadNext.cjsx
+++ /dev/null
@@ -1,50 +0,0 @@
-React = require 'react'
-Router = require 'react-router'
-{Link} = Router
-prune = require 'underscore.string/prune'
-includes = require 'underscore.string/include'
-find = require 'lodash/collection/find'
-
-module.exports = React.createClass
-
-  render: ->
-    {rhythm, fontSizeToMS} = @props.typography
-    readNext = @props.post.readNext
-    if readNext?
-      nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
-    unless nextPost
-      <noscript />
-    else
-      nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
-
-      # Create prunned version of the body.
-      html = nextPost.data.body
-      body = prune(html.replace(/<[^>]*>/g, ''), 200)
-
-      <div>
-        <h6
-          style={{
-            margin: 0
-            fontSize: fontSizeToMS(-1).fontSize
-            lineHeight: fontSizeToMS(-1).lineHeight
-            letterSpacing: -0.5
-          }}
-        >
-          READ THIS NEXT:
-        </h6>
-        <h3
-          style={{
-            marginBottom: rhythm(1/4)
-          }}
-        >
-          <Link
-            to={nextPost.path}
-            query={{readNext: true}}
-          >
-            {nextPost.data.title}
-          </Link>
-        </h3>
-        <p>{body}</p>
-        <hr />
-      </div>
-
diff --git a/components/ReadNext.jsx b/components/ReadNext.jsx
new file mode 100644
index 0000000..5eac26a
--- /dev/null
+++ b/components/ReadNext.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { prune, include as includes } from 'underscore.string';
+import find from 'lodash/collection/find';
+
+module.exports = React.createClass({
+  render: function() {
+    var body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
+    ref = this.props.typography, rhythm = ref.rhythm, fontSizeToMS = ref.fontSizeToMS;
+    readNext = this.props.post.readNext;
+    if (readNext != null) {
+      nextPost = find(this.props.pages, function(page) {
+        return includes(page.path, readNext.slice(1, -1));
+      });
+    }
+    if (!nextPost) {
+      return React.createElement("noscript", null);
+    } else {
+      nextPost = find(this.props.pages, function(page) {
+        return includes(page.path, readNext.slice(1, -1));
+      });
+      // Create pruned version of the body.
+      html = nextPost.data.body;
+      body = prune(html.replace(/<[^>]*>/g, ''), 200);
+
+      return (
+        <div>
+          <h6
+            style={{
+              margin: 0,
+              fontSize: fontSizeToMS(-1).fontSize,
+              lineHeight: fontSizeToMS(-1).lineHeight,
+              letterSpacing: -0.5
+            }}
+          >
+            READ THIS NEXT:
+          </h6>
+          <h3
+            style={{
+              marginBottom: rhythm(1/4)
+            }}
+          >
+            <Link
+              to={nextPost.path}
+              query={{readNext: true}}
+            >
+              {nextPost.data.title}
+            </Link>
+          </h3>
+          <p>{body}</p>
+          <hr />
+        </div>
+      );
+    }
+  }
+});