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