diff --git a/examples/with-styled-components-rtl/.babelrc b/examples/with-styled-components-rtl/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..854cb73a810377a6741e1d54afe3a1b511691fe3
--- /dev/null
+++ b/examples/with-styled-components-rtl/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["next/babel"],
+ "plugins": [["styled-components", { "ssr": true }]]
+}
diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..85eca1a20bf70e5251595950f835747a4328fae2
--- /dev/null
+++ b/examples/with-styled-components-rtl/README.md
@@ -0,0 +1,56 @@
+# Example with styled-components RTL
+
+This example shows how to use nextjs with right to left (RTL) styles using styled-components.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-styled-components-rtl)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-styled-components-rtl with-styled-components-rtl-app
+# or
+yarn create next-app --example with-styled-components-rtl with-styled-components-rtl-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-styled-components-rtl
+cd with-styled-components-rtl
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Right to left allows to "flip" every element in your site to fit the needs of the cultures that are read from right to left (like arabic for example).
+
+This example shows how to enable right to left styles using `styled-components`.
+
+The good news, is there is no need of doing it manually anymore. `stylis-plugin-rtl` makes the transformation automatic.
+
+From `pages/index.js` you can see, styles are `text-align: left;`, but what is actually applied is `text-align: right;`.
diff --git a/examples/with-styled-components-rtl/package.json b/examples/with-styled-components-rtl/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..92adec04bd32a26d0ce01692ea7d3ce9b3203095
--- /dev/null
+++ b/examples/with-styled-components-rtl/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "with-styled-components",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "next": "latest",
+ "react": "16.12.0",
+ "react-dom": "16.12.0",
+ "styled-components": "5.0.0",
+ "stylis-plugin-rtl": "1.0.0"
+ },
+ "devDependencies": {
+ "babel-plugin-styled-components": "1.10.6"
+ },
+ "license": "ISC"
+}
diff --git a/examples/with-styled-components-rtl/pages/_app.js b/examples/with-styled-components-rtl/pages/_app.js
new file mode 100644
index 0000000000000000000000000000000000000000..327914620e97f1f8e72c605bd4a3b0fca758ae08
--- /dev/null
+++ b/examples/with-styled-components-rtl/pages/_app.js
@@ -0,0 +1,21 @@
+import App from 'next/app'
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+
+const theme = {
+ colors: {
+ primary: '#0070f3',
+ },
+}
+
+export default class MyApp extends App {
+ render() {
+ const { Component, pageProps } = this.props
+
+ return (
+
+
+
+ )
+ }
+}
diff --git a/examples/with-styled-components-rtl/pages/_document.js b/examples/with-styled-components-rtl/pages/_document.js
new file mode 100644
index 0000000000000000000000000000000000000000..4aae44fc0e3d166a6f726022bdfd4ee79d1f88a0
--- /dev/null
+++ b/examples/with-styled-components-rtl/pages/_document.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import stylisRTLPlugin from 'stylis-plugin-rtl'
+
+export default class MyDocument extends Document {
+ static getInitialProps({ renderPage }) {
+ const sheet = new ServerStyleSheet()
+
+ const page = renderPage(App => props =>
+ sheet.collectStyles(
+
+
+
+ )
+ )
+
+ const styleTags = sheet.getStyleElement()
+
+ return { ...page, styleTags }
+ }
+ render() {
+ return (
+
+ {this.props.styleTags}
+
+
+
+
+
+ )
+ }
+}
diff --git a/examples/with-styled-components-rtl/pages/index.js b/examples/with-styled-components-rtl/pages/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a965d2de1ad6062b9deb3d1815927fc86f271d8e
--- /dev/null
+++ b/examples/with-styled-components-rtl/pages/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Title = styled.h1`
+ font-size: 50px;
+ color: ${({ theme }) => theme.colors.primary};
+ text-align: left;
+`
+
+export default () => My page