added "with-route-as-modal" exemple

extra space missing in style.css

oops

linted

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,7 @@
+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,30 @@
+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,12 @@
+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;
+}