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

apiの値を変数に代入する際に、以下のような方法だと可読性が上がります。 const obj = {name: "ko", age: 23, female: true} const {name, age, female} = obj; console.log(name); // "ko" { var } に代入すると、オブジェクトのキーがvarの値だけを取得で…

記事の詳細を作成するときに 記事内容をRich Text で記述するようにしました。 他の項目のようにpropsを渡すだけではなかったので方法を記述します。 contentfulの取得方法はこちら↓ https://okinawanpizza.hatenablog.com/entry/2021/10/21/010930 document…

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

//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:…

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

モジュールの読み込み時によく見かける {} と そうでないものの違いがわからなかったのでまとめてみました。 今回は default export と default import について。 import React from "react"; import { BookDescription } from "./BookDescription"; defaul…

今回は type と interface の違いについて。 # オブジェクトに型を定義する アノテーションの部分をオブジェクト{}にすることで可能。 ※型アノテーション = stringやbooleanのような注釈をつけて型を定義すること //通常の型アノテーション let name: string…

HeadlessCMSと従来のCMSの違いについてまとめました。 HeadlessCMSとは Head(ビュー、見た目を構築する部分)less(がない)、つまりレイアウトをツール内で管理しないCMSのこと 入稿画面付きのapi作成ツールと考えるとイメージしやすい メリット マルチデバイ…

こんにちはkoです。 来年に向けてブログのリニューアル行っています。 Contentfull × Vercel × Next.js でブログを作成しようと思っています。 今日はそのうち、Contentfulに関する設定方法を記述していきます。 目次 Contentfulとは 初回登録 Space Content…

コンポーネント 見た目と機能を持つUI部品 「関数コンポーネント」「クラスコンポーネント」の二つが代表される クラスコンポーネント ① React.Component を拡張して作られるJavaScriptクラスである。 import React, { Component } from "react"; //拡張する…

typescriptに scss を import しようとするとエラーになってしまう。 解決 next-env.d.tsファイルに以下を追記 //make it possible to import scss file declare module '*.css'; // or scss declare module '*.scss'; これで import が可能になります。 参…