[
{
"path": ".gitignore",
"content": "/.next\n/node_modules\n.vercel\nyarn-error.log*\nyarn-debug.log*\nnpm-debug.log*\n"
},
{
"path": "Readme.md",
"content": "# Next 13 App Router Page Transitions!\n\nhttps://twitter.com/lmatteis/status/1690279184990392320\n"
},
{
"path": "next-env.d.ts",
"content": "/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
},
{
"path": "next.config.js",
"content": "/**\n * @type {import('next').NextConfig}\n */\nmodule.exports = {\n reactStrictMode: true,\n images: {\n domains: ['pbs.twimg.com'],\n },\n experimental: {\n appDir: true,\n },\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"nextgram\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n },\n \"dependencies\": {\n \"@headlessui/react\": \"^1.7.15\",\n \"clsx\": \"^1.2.1\",\n \"framer-motion\": \"^10.15.1\",\n \"next\": \"^13.4.13\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@types/node\": \"20.3.1\",\n \"@types/react\": \"^18.2.14\",\n \"autoprefixer\": \"^10.4.14\",\n \"postcss\": \"^8.4.24\",\n \"sass\": \"^1.63.6\",\n \"tailwindcss\": \"^3.3.2\",\n \"typescript\": \"^5.1.3\"\n }\n}\n"
},
{
"path": "postcss.config.js",
"content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "src/app/four/page.tsx",
"content": "export default function One() {\n return (\n \n Four
\n \n );\n}\n"
},
{
"path": "src/app/global.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody {\n margin: 0px;\n padding: 0px;\n font-family: sans-serif;\n}\nbody {\n width: 100vw;\n height: 100vh;\n}\na {\n color: black;\n text-decoration: underline;\n}\na:hover {\n text-decoration: none;\n}\n"
},
{
"path": "src/app/layout.tsx",
"content": "import \"./global.css\";\n\nimport { PropsWithChildren } from \"react\";\nimport Link from \"next/link\";\nimport { Animate } from \"../components/Animate\";\n\nexport default function Layout({ children }: PropsWithChildren) {\n return (\n \n \n \n Home\n One\n Two\n Three\n Four\n \n\n {children}\n \n \n );\n}\n"
},
{
"path": "src/app/one/page.tsx",
"content": "export default function One() {\n return (\n \n One
\n \n );\n}\n"
},
{
"path": "src/app/page.tsx",
"content": "export default function Home() {\n return (\n \n Home
\n \n );\n}\n"
},
{
"path": "src/app/three/page.tsx",
"content": "export default async function One() {\n return (\n \n Three
\n \n );\n}\n"
},
{
"path": "src/app/two/page.tsx",
"content": "export default function One() {\n return (\n \n Two
\n \n );\n}\n"
},
{
"path": "src/components/Animate.tsx",
"content": "\"use client\";\n\nimport { PropsWithChildren, useContext, useRef } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { usePathname } from \"next/navigation\";\nimport { LayoutRouterContext } from \"next/dist/shared/lib/app-router-context\";\n\nexport function useLayoutRouterContext() {\n return useContext(LayoutRouterContext);\n}\n\nfunction FrozenRouter(props: PropsWithChildren<{}>) {\n const context = useLayoutRouterContext();\n const frozen = useRef(context).current;\n\n return (\n \n {props.children}\n \n );\n}\n\nexport function Animate({ children }: PropsWithChildren) {\n const pathname = usePathname();\n\n const onTheRight = { x: \"100%\" };\n const inTheCenter = { x: 0 };\n const onTheLeft = { x: \"-100%\" };\n\n const transition = { duration: 0.6, ease: \"easeInOut\" };\n\n return (\n \n \n {children}\n \n \n );\n}\n"
},
{
"path": "tailwind.config.js",
"content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './src/pages/**/*.{js,ts,jsx,tsx}',\n './src/components/**/*.{js,ts,jsx,tsx}',\n './src/app/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n 'gradient-conic':\n 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',\n },\n },\n },\n plugins: [],\n}\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"incremental\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ]\n },\n \"include\": [\n \"next-env.d.ts\",\n \".next/types/**/*.ts\",\n \"**/*.ts\",\n \"**/*.tsx\"\n ],\n \"exclude\": [\n \"node_modules\"\n ]\n}\n"
}
]