Add page and modal transitions

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,6 +1,35 @@
-/.next
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
 /node_modules
-.vercel
-yarn-error.log*
-yarn-debug.log*
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "semi": true
+}

README.md

@@ -0,0 +1,29 @@
+# NextGram with modal and page transitions
+
+This is a fork of the sample Next.js application that takes advantage of the advanced routing capabilities, sprinkled with animations using `framer-motion`.
+
+The photo route can be attached to _two distinct_ components:
+
+1. When navigating within the application, it is rendered as a modal
+1. When the page is refreshed, it is rendered as a standalone page
+
+# Thanks
+
+To everyone discussing about the issue and providing useful solutions and hints, see the issue here https://github.com/vercel/next.js/issues/49279
+
+# Try it Yourself
+
+## Demo
+
+https://nextgram-with-page-transitions.vercel.app
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextgram)
+
+## Locally
+
+```bash
+git clone https://github.com/npostulart/nextgram-with-page-transitions.git
+cd nextgram/
+pnpm install
+pnpm dev
+```

package.json

@@ -4,20 +4,25 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint && tsc --noEmit"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "clsx": "^1.2.1",
-    "next": "13.4.7",
+    "framer-motion": "^10.16.4",
+    "next": "13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "20.3.1",
     "@types/react": "^18.2.14",
     "autoprefixer": "^10.4.14",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
     "postcss": "^8.4.24",
+    "prettier": "^3.0.3",
     "sass": "^1.63.6",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3"