npx create-next-app my-project
npx create-next-app --example with-typescript my-project

function fetcher(url: string, options:any) {
  return fetch(url, options)
    .then((r) => r.json())
    .then((data) => {
      return data
    })
}

import useSWR from 'swr'

const { error, data } = useSWR<ResponseType>(url, fetcher)

const path = require('path')

module.exports = {
 
  webpack(config) {
    config.resolve.alias['@lib'] = path.join(__dirname, 'lib')
    config.resolve.alias['@components'] = path.join(__dirname, 'components')

    return config
  },
}

"baseUrl": "./",
"paths": {
  "@lib/*": ["lib/*"],
  "@components/*": ["components/*"]
}

export async function getServerSideProps(context) {
  // Call database or a external API 

  return {
    props: {}, // will be passed to the page component as props
  }
}

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getServerSideProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: posts }, the Blog component
  // will receive `posts` prop
  return {
    props: {
      posts,
    },
  }
}

export default Blog

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

import useSWR from 'swr'
 
function Profile () {
  const { data, error } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}