Dom Christie Photography

├── .eslintrc.json ├── jsconfig.json ├── public ├── favicon.ico ├── vercel.svg ├── thirteen.svg └── next.svg ├── next.config.js ├── components ├── Footer.js ├── Photo.js └── ViewTransition.js ├── pages ├── api │ └── hello.js ├── _app.js ├── _document.js ├── index.js └── photos │ └── [slug].js ├── README.md ├── package.json ├── .gitignore ├── photos.js └── styles ├── globals.css └── Home.module.css /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/domchristie/photography-view-transitions-nextjs/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: false, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /components/Footer.js: -------------------------------------------------------------------------------- 1 | 2 | export default function Footer () { 3 | return ( 4 | 7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # View Transitions Demonstration (Next.js) 2 | 3 | Using [Next.js](https://nextjs.org/), and a component that animates page navigations with View Transitions. 4 | 5 | --- 6 | © Dom Christie 2023 7 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | import ViewTransition from '@/components/ViewTransition' 3 | 4 | export default function App({ Component, pageProps }) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /components/Photo.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link.js' 2 | 3 | export default function Photo ({ slug, image, alt, index }) { 4 | const style = { viewTransitionName: `photo-${index}` } 5 | 6 | return ( 7 |

8 | 9 | {alt}

{alt}

10 | 11 |

12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-view-transitions-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "eslint": "8.36.0", 13 | "eslint-config-next": "13.2.4", 14 | "next": "13.2.4", 15 | "react": "18.2.0", 16 | "react-dom": "18.2.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import photos from '@/photos' 3 | import Photo from '@/components/Photo' 4 | import Footer from '@/components/Footer' 5 | 6 | export default function Home() { 7 | return ( 8 | <> 9 | Dom Christie Photography 10 |

11 |

12 |

))} 14 |

15 |

16 |