// pages/ssr-example.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  return {
    props: { data }, // passed to the page component as props
  }
}

function SSRPage({ data }) {
  return (
    <div>
      <h1>Server-side rendered data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

export default SSRPage

// pages/ssg-example.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data')
  const data = await res.json()
  
  return {
    props: { data },
    revalidate: 60 // regenerate page every 60 seconds if requested
  }
}

function SSGPage({ data }) {
  return (
    <div>
      <h1>Statically generated content</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

export default SSGPage

pages/
├── index.js         // maps to /
├── about.js         // maps to /about
└── blog/
    ├── index.js     // maps to /blog
    └── [slug].js    // maps to /blog/:slug

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

// store/AppContext.js
import { createContext, useContext, useState } from 'react'

const AppContext = createContext()

export function AppWrapper({ children }) {
  const [state, setState] = useState({
    theme: 'light',
    user: null
  })
  
  return (
    <AppContext.Provider value={{ state, setState }}>
      {children}
    </AppContext.Provider>
  )
}

export function useAppContext() {
  return useContext(AppContext)
}