// pages/index.js - Route: /
export default function Home() {
  return <h1>Home Page</h1>;
}

// pages/about.js - Route: /about
export default function About() {
  return <h1>About Page</h1>;
}

// pages/posts/[id].js - Route: /posts/:id
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

// pages/[category]/[product].js - Route: /:category/:product
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { category, product } = router.query;

  return (
    <div>
      <h1>Category: {category}</h1>
      <h2>Product: {product}</h2>
    </div>
  );
}

// pages/blog/[...slug].js - Routes: /blog/2020/01/01, /blog/category/post
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;
  // slug will be an array like ['2020', '01', '01'] or ['category', 'post']

  return <h1>Blog Post: {slug?.join('/')}</h1>;
}

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/hello-world">Blog Post</Link>
      
      {/* With dynamic route */}
      <Link href={`/posts/${postId}`}>Post</Link>
      
      {/* With object syntax for complex paths */}
      <Link href={{
        pathname: '/posts/[id]',
        query: { id: postId },
      }}>
        Post
      </Link>
    </nav>
  );
}

import { useRouter } from 'next/router';

export default function LoginButton() {
  const router = useRouter();
  
  function handleLogin() {
    // Authenticate user
    router.push('/dashboard');
    
    // Or with dynamic route
    router.push(`/profile/${userId}`);
    
    // Or with URL object
    router.push({
      pathname: '/posts/[id]',
      query: { id: postId },
    });
  }
  
  return <button onClick={handleLogin}>Log in</button>;
}

// pages/posts.js
export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// This runs at build time in production
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    // Revalidate every 10 seconds (incremental static regeneration)
    revalidate: 10,
  };
}

// pages/posts/[id].js
export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

// Generate the paths at build time
export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  // Get the paths we want to pre-render
  const paths = posts.slice(0, 10).map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    // fallback: false means other routes 404
    // fallback: true generates pages on demand
    // fallback: 'blocking' is similar but waits for generation
    fallback: 'blocking',
  };
}

// Fetch data for each page
export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  // If no post is found, return 404
  if (!post.id) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
    revalidate: 60, // Regenerate after 60 seconds
  };
}

// pages/profile.js
export default function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// This runs on every request
export async function getServerSideProps(context) {
  // context contains request parameters, headers, cookies
  const { req, res, params, query } = context;
  
  // Example: cookie-based authentication
  const cookies = req.headers.cookie;
  
  // Fetch data from an API
  const response = await fetch('https://api.example.com/user', {
    headers: {
      cookie: cookies
    }
  });
  
  const user = await response.json();
  
  // Redirect if not authenticated
  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: {
      user,
    },
  };
}

import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/dashboard-data');
      const data = await response.json();
      setData(data);
      setIsLoading(false);
    }
    
    fetchData();
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No data</p>;

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Total users: {data.totalUsers}</p>
    </div>
  );
}

import useSWR from 'swr';

// Reusable fetcher function
const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (error) return <div>Failed to load</div>;
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      <h1>Hello {data.name}!</h1>
      <p>Email: {data.email}</p>
    </div>
  );
}

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World!' });
}

// pages/api/users.js
export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      // Get data from your database
      res.status(200).json({ users: ['John', 'Jane'] });
      break;
    case 'POST':
      // Create data in your database
      res.status(201).json({ message: 'User created' });
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

// pages/api/users/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  const { method } = req;

  switch (method) {
    case 'GET':
      // Get user data from your database
      res.status(200).json({ id, name: `User ${id}` });
      break;
    case 'PUT':
      // Update user data in your database
      res.status(200).json({ id, message: 'User updated' });
      break;
    case 'DELETE':
      // Delete user data from your database
      res.status(200).json({ id, message: 'User deleted' });
      break;
    default:
      res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

// pages/_app.js
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// styles/Home.module.css
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// pages/index.js
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Hello Next.js</h1>
    </div>
  );
}

// Install Sass
// npm install sass

// styles/Home.module.scss
.container {
  min-height: 100vh;
  
  .title {
    color: #0070f3;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

// pages/index.js
import styles from '../styles/Home.module.scss';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello Next.js</h1>
    </div>
  );
}

export default function Button() {
  return (
    <>
      <button>Click me</button>
      <style jsx>{`
        button {
          background: #0070f3;
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 4px;
          cursor: pointer;
        }
        button:hover {
          background: #0051a2;
        }
      `}</style>
    </>
  );
}

import Image from 'next/image';

export default function Avatar() {
  return (
    <div>
      {/* Local images require width and height */}
      <Image
        src="/profile.jpg" // Route to the image file in public directory
        alt="Profile"
        width={500}
        height={500}
        priority // Load image immediately (LCP)
      />
      
      {/* Remote images require width, height, or layout="fill" */}
      <Image
        src="https://example.com/profile.jpg"
        alt="Profile"
        width={500}
        height={500}
        loader={customLoader} // Optional custom loader
      />
      
      {/* Fill container (parent must have position: relative) */}
      <div style={{ position: 'relative', width: '100%', height: '300px' }}>
        <Image
          src="/banner.jpg"
          alt="Banner"
          fill
          style={{ objectFit: 'cover' }}
        />
      </div>
    </div>
  );
}

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="My page description" />
        <meta property="og:title" content="My Page Title" />
        <meta property="og:description" content="My page description" />
        <meta property="og:image" content="https://example.com/og-image.jpg" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Welcome to my page</h1>
      </main>
    </>
  );
}

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// pages/_app.js
import '../styles/globals.css';
import Layout from '../components/Layout';
import { ThemeProvider } from '../context/ThemeContext';

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);

  return (
    <ThemeProvider>
      {getLayout(<Component {...pageProps} />)}
    </ThemeProvider>
  );
}

// pages/index.js - Example of page-level layout
import AdminLayout from '../components/AdminLayout';

export default function Home() {
  return <h1>Home Page</h1>;
}

// Define a custom layout for this page
Home.getLayout = function getLayout(page) {
  return <AdminLayout>{page}</AdminLayout>;
};

// Access in Node.js environment (SSR, API routes)
console.log(process.env.DB_PASSWORD);

// Access in browser (must be prefixed with NEXT_PUBLIC_)
console.log(process.env.NEXT_PUBLIC_API_URL);

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Get a cookie
  const theme = request.cookies.get('theme');

  // Clone the request headers
  const requestHeaders = new Headers(request.headers);
  
  // Set a request header
  requestHeaders.set('x-theme', theme?.value || 'light');

  // You can also redirect
  if (!request.cookies.get('authenticated') && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Continue the request with modified headers
  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

// Configure which paths should be matched
export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*'],
};

// next.config.js
module.exports = {
  i18n: {
    // Locales you want to support
    locales: ['en', 'fr', 'es'],
    // Default locale
    defaultLocale: 'en',
    // Domain-specific locales
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.es',
        defaultLocale: 'es',
      },
    ],
  },
};

// Use in components
import { useRouter } from 'next/router';

export default function LocaleSwitcher() {
  const router = useRouter();
  const { locales, locale: activeLocale } = router;

  const handleLocaleChange = (e) => {
    const locale = e.target.value;
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <select
      onChange={handleLocaleChange}
      defaultValue={activeLocale}
    >
      {locales.map((locale) => (
        <option key={locale} value={locale}>
          {locale}
        </option>
      ))}
    </select>
  );
}

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable "count" with initial value 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// This is equivalent to:
const countState = useState(0);
const count = countState[0];
const setCount = countState[1];

function UserForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState('');

  // ...
}

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect(() => {
  const subscription = props.source.subscribe();
  
  // Cleanup function (equivalent to componentWillUnmount):
  return () => {
    subscription.unsubscribe();
  };
});

// Only runs on mount and unmount (empty dependencies)
useEffect(() => {
  console.log('Component mounted');
  return () => console.log('Component unmounted');
}, []);

// Runs when count changes
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

// Runs on every render (no dependency array)
useEffect(() => {
  console.log('Component rendered');
});

function UserProfile({ userId }) {
  // These could be separated into different useEffects
  useEffect(() => {
    // Fetch user data
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);

  useEffect(() => {
    // Set up analytics
    const analytics = setupAnalytics();
    return () => analytics.cleanup();
  }, []);
}

import React, { useContext } from 'react';

// Create a context
const ThemeContext = React.createContext('light');

function ThemedButton() {
  // Use the context
  const theme = useContext(ThemeContext);
  
  return <button className={theme}>Themed Button</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

import React, { useReducer } from 'react';

// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  // Initialize state with useReducer
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

// The initialArg (second argument) is passed to the init function (third argument)
const [state, dispatch] = useReducer(reducer, initialArg, init);

import React, { useState, useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  
  // This function is recreated only when count changes
  const handleClick = useCallback(() => {
    console.log(`Clicked: ${count}`);
  }, [count]);
  
  return <Child onClick={handleClick} />;
}

// Child uses React.memo to prevent unnecessary renders
const Child = React.memo(({ onClick }) => {
  console.log("Child rendered");
  return <button onClick={onClick}>Click me</button>;
});

import React, { useMemo, useState } from 'react';

function ExpensiveCalculation({ a, b }) {
  // Value is only recalculated when a or b changes
  const result = useMemo(() => {
    console.log('Calculating...');
    return a * b;
  }, [a, b]);
  
  return <div>Result: {result}</div>;
}

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  // Create a ref
  const inputRef = useRef(null);
  
  // Focus the input element
  const focusInput = () => {
    inputRef.current.focus();
  };
  
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

function TimerExample() {
  const [seconds, setSeconds] = useState(0);
  const timerRef = useRef(null);
  
  useEffect(() => {
    timerRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    
    return () => clearInterval(timerRef.current);
  }, []);
  
  const stopTimer = () => {
    clearInterval(timerRef.current);
  };
  
  return (
    <div>
      <p>Seconds: {seconds}</p>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// Create a forward ref component
const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  
  // Expose only certain methods to parent
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    reset: () => {
      inputRef.current.value = '';
    }
  }));
  
  return <input ref={inputRef} />;
});

function Parent() {
  const fancyInputRef = useRef();
  
  return (
    <>
      <FancyInput ref={fancyInputRef} />
      <button onClick={() => fancyInputRef.current.focus()}>
        Focus Input
      </button>
      <button onClick={() => fancyInputRef.current.reset()}>
        Reset
      </button>
    </>
  );
}

function Tooltip({ text, position }) {
  const tooltipRef = useRef();
  
  // This runs synchronously after DOM mutations
  useLayoutEffect(() => {
    const element = tooltipRef.current;
    // These measurements happen synchronously after DOM mutations
    const { height, width } = element.getBoundingClientRect();
    
    // Position the tooltip based on its size and the position prop
    element.style.top = `${position.y - height}px`;
    element.style.left = `${position.x - width / 2}px`;
  }, [position]);
  
  return <div ref={tooltipRef} className="tooltip">{text}</div>;
}

import React, { useState, useDebugValue } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);
  
  // This will show up in React DevTools
  useDebugValue(value ? 'Online' : 'Offline');
  
  return [value, setValue];
}

import { useState, useEffect } from 'react';

// Custom hook for window dimensions
function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  
  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    // Add event listener
    window.addEventListener('resize', handleResize);
    
    // Call handler right away to update initial size
    handleResize();
    
    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty array ensures this only runs on mount and unmount
  
  return windowSize;
}

// Using the custom hook
function MyComponent() {
  const size = useWindowSize();
  
  return (
    <div>
      Window width: {size.width}px, height: {size.height}px
    </div>
  );
}

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url, { signal: abortController.signal });
        
        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }
        
        const json = await response.json();
        setData(json);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
          setData(null);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();
    
    return () => abortController.abort();
  }, [url]);

  return { data, loading, error };
}

// Usage
function Posts() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <ul>
      {data?.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

function useLocalStorage(key, initialValue) {
  // State to store our value
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that
  // persists the new value to localStorage.
  const setValue = value => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

// Usage
function App() {
  const [name, setName] = useLocalStorage('name', 'Bob');
  
  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
}