SSG対応

[daikiku10]

ランディングページをSSG対応する。

SSG(Static Site Generation)対応の流れ

1. getStaticProps を使用する

   
   // posts will be populated at build time by getStaticProps()
   function Blog({ posts }) {
   return (
   <ul>
     {posts.map((post) => (
       <li>{post.title}</li>
     ))}
   </ul>
   )
   }

// This function gets called at build time on server-side. // It won't be called on client-side, so you can even do // direct database queries. 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

2. `next.config.js`の設定

/* @type {import('next').NextConfig} / const nextConfig = { reactStrictMode: true, swcMinify: true, } // URLの統一(ファイル生成時にURLの最後にスラッシュをつけるかどうか) exportTrailingSlash: true, // それぞれのURLに対して静的ファイルの生成先を指定(getStaticPathsは無視され、オーバーライドされる。併用しないことを勧める) exportPathMap: async function () { const paths = { '/': { page: '/' }, '/about': { page: '/about' } }

module.exports = nextConfig

3. コマンド実行

$ next build $ next export

[daikiku10]

@masaokaka 上記にSSG対応の調べた内容を書いたから火曜か木曜にペアプロか画面共有で一緒にやりましょー！

[masaokaka]

• 画像をImage→imgタグに修正
• 付随して発生するデザインの崩れを修正
• デプロイ