【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: { article: items[0] } } }
自分が書いているcontentfulを使ったブログの一部分。
getStaticProps({ params }) を用いるとparamsに{ slug: 'test2' }
が格納される。
useRouterを使わないと取得できないのかと思っていてびっくり。
【Next.js】contentfulのコンテンツをNext.js 側で取得する
contentfulと言うHeadlessCMSで作成した記事内容をNext.js側に出力する方法について。
手順
- contentfulをインストール
- データの取得
- コンポーネントに渡す
contentfulをインストール
- npmでインストール
npm install contentful
- index.jsxインポート
import { createClient } from "contentful";
データの取得
以下を記述
// index.jsx export async function getStaticProps() { const client = createClient({ space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID, accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN, }); const res = await client.getEntries({content_type: "blog"}); return { props: { articles: res.items } } }
.env.localを作成し以下を記述
NEXT_PUBLIC_CONTENTFUL_SPACE_ID=(①) NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=(②)
settings→APIkeys→Add API key を押すと下の画像のような画面になるので
space ID と access Token をそれぞれに渡します。
コンポーネントに渡す
articles: res.items
と設定しているので、articlesをプロップスとして渡します。
export default function Home({ articles }) { console.log(articles); }
以上!
【JavaScript】default export と default import について
モジュールの読み込み時によく見かける {}
と
そうでないものの違いがわからなかったのでまとめてみました。
今回は default export と default import について。
import React from "react"; import { BookDescription } from "./BookDescription";
default export (名前なしexport)
- 他のファイルで利用するために export を宣言する
- アロー関数だとファイルの最後に
export default (関数名)
を追記 - 名前付き関数だと関数宣言時に
export default
を追記
//アロー関数 const Title = (props) => { return <h2>{props.title}</h2> } export default Title;
//名前付き関数 export default function Title(props) { return <h2>{props.title}</h2> }
default import (名前なしimport)
- default export で指定した名前を import 時につける
- default export でファイルごと読み込む時は ファイル名も同じ名前であることが多い
// Title.jsx ~~~ export default Title;
// App.jsx import Title from ".Title";
おわり
この辺り意外とこんがらがっているので改めて整理できてよかったです。
明日は名前付きのexport import についての記事を書こうとおもいます。
おしまい
【typescript】interfaceは拡張ができる、typeは拡張ができない
今回は type と interface の違いについて。
# オブジェクトに型を定義する
アノテーションの部分をオブジェクト{}
にすることで可能。
※型アノテーション = stringやbooleanのような注釈をつけて型を定義すること
//通常の型アノテーション let name: string = "tamakipedia"; //オブジェクトの場合 let obj: {name: string, age: number, isHandsome: boolean} = { name: "tamakipedia", age: 20, isHandsome: true }
interface
オブジェクトの型アノテーションは長すぎると読みづらいので
名前をつけることが可能。
// オブジェクトの型を定義 interface Human { name: string, age: number, isHandsome: boolean } //型をHumanにする let obj: Human = { name: "tamakipedia", age: 20, isHandsome: true } let obj.name = 20 //Type 'number' is not assignable to type 'string'
type
interfaceもtype同様、型に名前をつけて参照できるようにします。
こちらはタイプエイリアスと呼ばれるそうです。
// 代入してる type Human = { name: string, age: number, isHandsome: boolean }
type と interface の違い
interfaceは拡張ができる
interface Human { name: string, age: number, isHandsome: boolean } //新しいプロパティを追加 interface Human { isAdorable: boolean } //型をHumanにする let obj: Human = { name: "tamakipedia", age: 20, isHandsome: true, isAdorable: true }
おしまい
今読んでいる参考書にはinterfaceを使っていることが多く、
別の記事にtypeを使ったチュートリアルがあったので調べてみました。
拡張できると可読性が低くなるので使用注意ですね!!
HeadlessCMS と 従来のCMS との違い
Contentfulの設定方法
こんにちはkoです。
来年に向けてブログのリニューアル行っています。
Contentfull × Vercel × Next.js でブログを作成しようと思っています。
今日はそのうち、Contentfulに関する設定方法を記述していきます。
目次
Contentfulとは
Contentfulとは、「Headless CMS」 と呼ばれるAPIベースのCMSです。
Contentful以外にも、GraphCMS、Micro CMS などがあります。
Headless CMS ツール比較参考記事
https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/headless-cms/
初回登録
下記リンクから初期登録します。
https://www.contentful.com/sign-up/
githubを連携したら自動的にサインアップできます。
完了したらログインし、
Space、ContentModel、Field、Contentの作成を行います。
Space
Spaceはブログごとの単位のことを指します。
(GitHubでいうリポジトリのようなものだと捉えています。)
設定方法:
「左上のハンバーガーメニュー」>「Create Space」
ContentModel
In short, a content model gives structure and organization to your content. Within your overall content model
ContentModelはコンテンツの構造のことです。
例えばブログを書くのであれば「タイトル」「画像」「内容」などの項目が設定されると思います。
その項目に関する仕様のことです。
ここでは content type(=モデル名) を設定します。
設定方法: 「左上にあるAdd content type」>「モーダルの項目を記述」
モデリンクに関するリファレンス
https://www.contentful.com/help/content-modelling-basics/
Field
Fieldは「タイトル」「サムネ」「記事本文」などといった
コンテンツ内の項目のことです。
設定方法:
「add field」>「モーダルに表示される9つの型を選択」>「ラベル名や詳細の設定」
Content
Contentでは、実際にモデルで設定した仕様に従ってコンテンツを作成することができます。
おしまい
以上がContentfulの設定になります。
最初調べた時は2~3時間くらいかかったのですが
まとめてみると意外と手順が少なくてびっくりしました。
そういった手軽さも従来のCMSと比べて良いですね!
次は少し気になったHeadless CMS と 従来のCMS の具体的な違いについて
自分なりにまとめてみようと思います。
おしまい
【React】関数コンポーネントとクラスコンポーネントの違いについて
コンポーネント
クラスコンポーネント
① React.Component を拡張して作られるJavaScriptクラスである。
import React, { Component } from "react"; //拡張する Component をインポート class ClassComponent extends Component { // extends で拡張したクラスを生成 render() { // レンダリングする要素は render() メソッド内で返される return <button>push here</button>; } }
② propsの受け渡しは this.props を使う (プロパティー)
class ClassComponent extends React.Component { render() { const { who } = this.props; return <button>push { who }</button>; } }
③ state処理はconstructor内に記述する
class ClassComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>count: {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click </button> </div> ); }
関数コンポーネント
① React.Component を拡張して作られるJavaScriptクラス。
import React from "react"; const FunctionalComponent = () => { return <button>push here</button>; };
② props の受け渡しは引数にて行う。
const FunctionalComponent = ({ who }) => { return <button>push { who }</button>; }; // <FunctionalComponent who="me" />
③ state処理はuseState()を使う。
const FunctionalComponent = () => { const [count, setCount] = useState(0); return ( <div> <button onClick={() => setCount(count + 1)}>{count} time(s) pushed </button> </div> ); };