Use app router with interception (vercel#4)

* Link codemod * Image codemod * Use pnpm * Upgrade Next.js and React * Use app router with interception
AnishD-08 · Apr 7, 2023 · f3cc917 · f3cc917
1 parent cfe4b1e
commit f3cc917
Show file tree

Hide file tree

Showing 18 changed files with 492 additions and 1,056 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /.next
 /node_modules
+.vercel
diff --git a/app/@modal/(..)photos/[id]/page.js b/app/@modal/(..)photos/[id]/page.js
@@ -0,0 +1,14 @@
+import Photo from "../../../../components/frame";
+import Modal from "../../../../components/modal";
+import swagPhotos from "../../../../photos";
+
+export default function PhotoModal({ params: { id: photoId } }) {
+  const photos = swagPhotos;
+  const photo = photoId && photos.find((p) => p.id === photoId);
+
+  return (
+    <Modal>
+      <Photo photo={photo} />
+    </Modal>
+  );
+}
diff --git a/app/@modal/default.js b/app/@modal/default.js
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/app/default.js b/app/default.js
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/app/layout.js b/app/layout.js
@@ -0,0 +1,12 @@
+import "../styles/reboot.css";
+
+export default function Layout(props) {
+  return (
+    <html>
+      <body>
+        {props.children}
+        {props.modal}
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.js b/app/page.js
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import styles from "../styles/home.module.scss";
+import swagPhotos from "../photos";
+import BlurImage from "../components/BlurImage";
+
+export default function Home() {
+  const photos = swagPhotos;
+
+  return (
+    <main className={styles.container}>
+      <div>
+        <h1>NextGram</h1>
+      </div>
+      <div className={styles.images}>
+        {photos.map(({ id, imageSrc }) => (
+          <div key={id} className={styles.imageContainer}>
+            <div key={id} className={styles.imageWrapper}>
+              <Link href={`/photos/${id}`}>
+                <BlurImage
+                  alt=""
+                  src={imageSrc}
+                  height={500}
+                  width={500}
+                  objectFit="cover"
+                />
+              </Link>
+            </div>
+          </div>
+        ))}
+      </div>
+    </main>
+  );
+}
diff --git a/app/photos/[id]/page.js b/app/photos/[id]/page.js
@@ -0,0 +1,16 @@
+import React from "react";
+import Photo from "../../../components/frame";
+import swagPhotos from "../../../photos";
+import { permalink, wrap } from "./styles.module.css";
+
+export default function PhotoPage({ params: { id } }) {
+  const photo = swagPhotos.find((p) => p.id === id);
+
+  return (
+    <div className={permalink}>
+      <div className={wrap}>
+        <Photo photo={photo} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/photos/[id]/styles.module.css b/app/photos/[id]/styles.module.css
@@ -0,0 +1,10 @@
+.permalink {
+  padding: 100px;
+  text-align: center;
+}
+
+.wrap {
+  display: inline-block;
+  border: 1px solid #999;
+  margin: auto;
+}
diff --git a/components/BlurImage/index.js b/components/BlurImage/index.js
@@ -1,18 +1,16 @@
-import Image from "next/image";
+"use client";
+import Image from "next/legacy/image";
 import styles from "./styles.module.css";
 import { useState } from "react";
 import cn from "clsx";
 
 export default function BlurImage(props) {
-  const [isLoading, setLoading] = useState(true);
+  // const [isLoading, setLoading] = useState(true);
   return (
     <Image
       {...props}
-      className={cn(
-        styles["image-transition"],
-        isLoading ? styles["image-loading"] : styles["image-loaded"]
-      )}
-      onLoadingComplete={() => setLoading(false)}
+      className={cn(styles["image-transition"], styles["image-loaded"])}
+      // onLoadingComplete={() => setLoading(false)}
     />
   );
 }
diff --git a/components/frame/index.js b/components/frame/index.js
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styles from "./styles.module.css";
 
 export default function Photo({ photo }) {

diff --git a/components/modal/index.js b/components/modal/index.js
@@ -1,10 +1,16 @@
-import { useCallback, useRef } from 'react';
-import Photo from '../frame';
-import styles from './styles.module.css';
+"use client";
+import { useCallback, useRef, useEffect } from "react";
+import styles from "./styles.module.css";
+import { useRouter } from "next/navigation";
 
-export default function Modal({ photo, onDismiss }) {
+export default function Modal({ children }) {
   const overlay = useRef();
   const wrapper = useRef();
+  const router = useRouter();
+
+  const onDismiss = useCallback(() => {
+    router.back();
+  }, [router]);
 
   const onClick = useCallback(
     (e) => {
@@ -15,10 +21,22 @@ export default function Modal({ photo, onDismiss }) {
     [onDismiss, overlay, wrapper]
   );
 
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") onDismiss();
+    },
+    [onDismiss]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onKeyDown]);
+
   return (
     <div ref={overlay} className={styles.overlay} onClick={onClick}>
       <div ref={wrapper} className={styles.wrapper}>
-        <Photo photo={photo} />
+        {children}
       </div>
     </div>
   );

diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,12 @@
+/**
+ * @type {import('next').NextConfig}
+ */
 module.exports = {
+  reactStrictMode: true,
   images: {
-    domains: ['pbs.twimg.com'],
+    domains: ["pbs.twimg.com"],
+  },
+  experimental: {
+    appDir: true,
   },
 };