added "with-route-as-modal" example (#11473)

* added "with-route-as-modal" exemple

extra space missing in style.css

oops

linted

* Use Link and removed unrequired imports

Co-authored-by: Luis Alvarez <[email protected]>

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,5 @@
+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,11 @@
+import Link from 'next/link'
+
+const PostCard = ({ id }) => {
+  return (
+    <Link href={`/?postId=${id}`} as={`/post/${id}`}>
+      <a className="postCard">{id}</a>
+    </Link>
+  )
+}
+
+export default PostCard

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

@@ -0,0 +1,16 @@
+{
+  "name": "with-route-as-modal",
+  "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,31 @@
+import { useRouter } from 'next/router'
+import Modal from 'react-modal'
+import Post from '../components/Post'
+import PostCard from '../components/PostCard'
+
+Modal.setAppElement('#__next')
+
+const posts = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+const Index = () => {
+  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 Index

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

@@ -0,0 +1,11 @@
+import { useRouter } from 'next/router'
+import Post from '../../components/Post'
+
+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;
+}