tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

Next.js

【vercel】【Next.js】vercelを使ってのデプロイ方法

vercelでのデプロイがうまくいかなかったので 最初から作りました。手順メモ。 特に難しくはないのですがポイントが二つあります。 * Create Team は skip すること * .env.localで設定した環境変数を設定すること 方法 ・vercelにアクセスし、下記画像からC…

【Next.js】【contentful】動的なルーティングを利用した詳細ページの作成

こんにちは、本日はcontentfulのエントリーの内容を詳細ページに追加していこうと思います。 なお、エントリーは一記事単位の呼び方です。 (下記図参照) 結果 以下が全体図です。 //pages/posts/[slug].js import { createClient } from "contentful"; impor…

【Next.js】getStaticPropsでurlを取得することが可能

//http://localhost:3000/posts/test2 export async function getStaticProps({ params }) { console.log(params) // {slug: "test2"} const { items } = await client.getEntries({ content_type: "article", "fields.slug": params.slug }) return{ props:…

【Next.js】contentfulのコンテンツをNext.js 側で取得する

contentfulと言うHeadlessCMSで作成した記事内容をNext.js側に出力する方法について。 手順 contentfulをインストール データの取得 コンポーネントに渡す contentfulをインストール npmでインストール npm install contentful index.jsxインポート import {…