Next.jsはGatsby.jsを倒さない

- url形式は /blogs/[記事id] にしたい
- トップページに記事一覧を表現したい
- 別フレームワークにてapiを開発を行うものとして自由に作れるが、`https://.../blogs`で全てのブログ情報を取得する想定で進める

const path = require(`path`)

exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  const blogTemplate = path.resolve(`src/templates/blog.js`)
  const topTemplate = path.resolve(`src/templates/top.js`)
  
  const res = await fetch('https://.../blogs')
  const blogs = await res.json()
  blogs.forEach(blog => {
    createPage({
      path: `/blogs/${blog.id}`,
      component: blogTemplate,
      context: {
	blog,
      },
    })
  })
  const links = blogs.map(blog => ({ url: `/blogs/${blog.id}`, title: blog.title })
  createPage({
    path: '/',
    component: topTemplate,
    context: {
      links,
    },
  })
}

function Blog({ blog }) {
  ...
}

export async function getStaticPaths() {
  const res = await fetch('https://.../blogs')
  const blogs = await res.json()
  const paths = blogs.map((blog) => `/blogs/${blog.id}`)
  return {
    paths,
    fallback: true,
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch('https://.../blogs')
  const blogs = await res.json()
  const blog = blogs.find(blog => params.id === blog.id)

  return {
    props: {
      blog,
    },
  }
}

export default Blog

function Top({ links }) {
  ...
}

export async function getStaticProps() {
  const res = await fetch('https://.../blogs')
  const blogs = await res.json()
  const links = blogs.map(blog => ({ url: `/blogs/${blog.id}`, title: blog.title })

  return {
    props: {
      links,
    },
  }
}

export default Top

function Blog({ blog }) {
  ...
}

  export async function getStaticPaths() {
-   const res = await fetch('https://.../blogs')
-   const blogs = await res.json()
-   const paths = blogs.map((blog) => `/blogs/${blog.id}`)
   return {
-     paths,
+     paths: [],
      fallback: true,
   }
 }

export async function getStaticProps({ params }) {
  const res = await fetch('https://.../blogs')
  const blogs = await res.json()
  const blog = blogs.find(blog => params.id === blog.id)

  return {
    props: {
      blog,
    },
+   revalidate: 15 * 60,
  }
}

export default Blog