added "with-route-as-modal" exemple

extra space missing in style.css

oops

examples/with-route-as-modal/README.md

@@ -0,0 +1,44 @@
+# with-route-as-modal
+
+On many popular social media, opening a post will update the URL but won't trigger a navigation and will instead display the content inside a modal. This behavior ensure the user won't lose the current UI context (scroll position...). The URL still reflect the post's actual page location and any refresh will bring the user there. This behavior ensure great UX without neglecting SEO.
+
+This example show how to conditionally display a modal based on a route.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-route-as-modal)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-route-as-modal with-route-as-modal-app
+# or
+yarn create next-app --example with-route-as-modal with-route-as-modal-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-route-as-modal
+cd with-route-as-modal
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-route-as-modal/components/Post.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Post = ({ id }) => {
+  return (
+    <div className="post">
+      {`I am the post ${id}`}
+    </div>
+  )
+}
+
+export default Post;

examples/with-route-as-modal/components/PostCard.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Router from "next/router";
+
+const PostCard = ({ id }) => {
+  return (
+    <a
+      className="postCard"
+      href={`/posts/${id}`}
+      onClick={e => {
+        e.preventDefault();
+        Router.push(`/?postId=${id}`, `/post/${id}`)
+      }}
+    >
+      {id}
+    </a>
+  )
+}
+
+export default PostCard;

examples/with-route-as-modal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-route-as-modal",
+  "main": "index.js",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-modal": "3.11.2"
+  },
+  "license": "ISC"
+}

examples/with-route-as-modal/pages/_app.js

@@ -0,0 +1,7 @@
+import '../style.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-route-as-modal/pages/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PostCard from "../components/PostCard";
+import Modal from "react-modal";
+import { useRouter } from "next/router";
+import Post from "../components/Post";
+
+const posts = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+const RootPage = () => {
+  const router = useRouter()
+
+  return (
+    <>
+      <Modal
+        isOpen={!!router.query.postId}
+        onRequestClose={() => router.push("/")}
+        contentLabel="Post modal"
+      >
+        <Post id={router.query.postId} />
+      </Modal>
+      <div className="postCardGrid">
+        {
+          posts.map((id, index) => (
+            <PostCard key={index} id={id} />
+          ))
+        }
+      </div>
+    </>
+  )
+}
+
+export default RootPage;

examples/with-route-as-modal/pages/post/[postId].js

@@ -0,0 +1,14 @@
+import React from "react";
+import Post from "../../components/Post";
+import { useRouter } from "next/router";
+
+const PostPage = () => {
+  const router = useRouter()
+  const { postId } = router.query
+
+  return (
+    <Post id={postId} />
+  )
+}
+
+export default PostPage;

examples/with-route-as-modal/style.css

@@ -0,0 +1,37 @@
+body {
+    margin: 0;
+}
+
+#__next {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.postCardGrid {
+    display: inline-grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+}
+
+.postCard {
+    width: 150px;
+    height: 150px;
+    background-color: lightblue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: black solid 1px;
+}
+
+.post {
+    width: 100%;
+    height: 100%;
+    background-color: darkcyan;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}