Next.js13のApp Routerについて勉強した

私が運営しているブログサイトにRSSフィードを実装しました。今回はその時の話をしたいと思います。 このブログサイトには、コンテンツ管理(ブログ記事)をmicroCMSで管理しているので、microCMSで管理しているブログの記事を 取得しxmlで吐いていきたいと思います。 尚、フロントエンドはNext.jsです。<h2 id="hc3cf2129da">ライブラリをインストール</h2>動的にRSSフィードを実装をする上で簡単に実装できるライブラリがあるのでそれをインストールします。<pre><code>$ npm install rss</code></pre>また今回はtypescriptを使うので、合わせてこちらもインストールします。<pre><code>$ npm install --save-dev @types/rss</code></pre><h2 id="hedfa5ee1ed">getServerSidePropsで動的にRSSフィードを生成する</h2><code>page/feed.tsx</code>を作成する。<pre><code>import React from "react";
import { GetServerSidePropsContext } from "next";
import generateFeed from "../functions/genalate-rss-feed";

export const getServerSideProps = async ({ res }: GetServerSidePropsContext) =&gt; {
 const xml = await generateFeed(); // フィードのXMLを生成する（後述）
	 
 res.statusCode = 200;
 res.setHeader("Cache-Control", "s-maxage=86400, stale-while-revalidate"); // 24時間のキャッシュ
 res.setHeader("Content-Type", "text/xml");
 res.end(xml);
	
 return {
	props: {},
 };
};
	
const feed = () =&gt; null;
export default feed;</code></pre><code>getServerSideProps</code>を使用してRSSデータを生成し、直接レスポンスを返すことで、余計なレイアウトやメタタグなどが混入しないようにします。Pageコンポーネント内でHTMLやXMLを返しても、<code>_app.tsx</code>や<code>_document.tsx</code>の中に埋め込まれるため、余計なレイアウトやメタタグなどが混じってしまう可能性があるため、直接レスポンスを返すことでそれを防ぎます。 <code>getServerSideProps</code>の引数で<code>res</code>を受け取ることができ、Headerに<code>Content-Type</code>や<code>Cache-Control</code>を付けた上で、<code>res.end(RSSフィードの中身)</code>という形でレスポンスを返します。これにより、生成されたRSSデータが正しい形式でクライアントに返されるようになります。<h2 id="ha10a36ae39">RSSフィードを生成する</h2><code>src/functions/genalate-rss-feed.ts</code>を作成します。ここで先ほどインストールした<a href="https://www.npmjs.com/package/rss" target="_blank" rel="noopener noreferrer">rss</a>の登場です。<pre><code>import RSS from "rss";
import { createClient } from "microcms-js-sdk"; 
	
export const client = createClient({
　　serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN as string, 
 apiKey: process.env.NEXT_PUBLIC_API_KEY as string,
});

const SITE_URL = "サイトのURL";

const generateFeed = async (): Promise&lt;string&gt; =&gt; {
 const feed = new RSS({
 title: "タイトルです",
 description: "ディスクリプションです",
 site_url: SITE_URL,
 feed_url: "/feed",
 language: "ja",
 });
 
 const data = await client.get({
 endpoint: "blog",
 	queries: {
 	 limit: 999,
 	},
 });
 data.contents.forEach((post) =&gt; {
 	feed.item({
 	 title: returnTitle(post.title),
 	 description: returnDiscription(post.body),
 	 date: new Date(post.createdAt),
 	 url: `${SITE_URL}/blog/${post.id}`,
 	});
 });
 
 // XML形式の文字列にする
 return feed.xml();
};
 
export default generateFeed;</code></pre> <a href="https://zenn.dev/catnose99/articles/c7754ba6e4adac" target="_blank" rel="noopener noreferrer">https://zenn.dev/catnose99/articles/c7754ba6e4adac</a>

microCMSから取得してきたデータをNext.jsを使ってRSSフィードを生成する方法

今回はAstroというwebフレームワークを使って、自分のポートフォリオサイトを作り直した時の話をしたいと思います。 <a href="https://watataku-portfolio.vercel.app/" target="_blank" rel="noopener noreferrer">https://watataku-portfolio.vercel.app/</a><h2 id="hd8fb52f923">Astro</h2>まず初めにAstroというフレームワークを知らない方のために軽く触れておきます。 <img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/9275dd3674cb4b75a4935787a148595e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-24%2018.26.26.png" alt=""> <a href="https://astro.build/" target="_blank" rel="noopener noreferrer">https://astro.build/</a><blockquote>Astroとは、ReactやVue.jsのようにコンポーネント指向で開発ができるUIフレームワークです。さらに、ウェブアプリではなくウェブサイトを作るために用意されたWebフレームワークであったり、React、Preact、Svelte、Vue、Solidなど様々なUIフレームワークを用いて開発できる特徴もあります。</blockquote> そしてAstroを語る上でもう一つ欠かせないのがAstro Islandsです。 これも公式のドキュメントで説明されています。 <a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">https://docs.astro.build/en/concepts/islands/</a> 簡単に解説すると、ページの各UIコンポーネントを別モノとして扱うことができます。 これによりコンポーネント間の優先度設定によるパフォーマンス調整やコンポーネント毎にUIフレームワークを変えられることがメリットとなっています。<h2 id="h8304d8c7ba">Astroを採用した理由</h2><ul><li>ウェブアプリではなくウェブサイトを作りたい</li><li>コンポーネント指向で開発したい</li><li>Typescriptで書きたい</li><li>勉強コストをできるだけ抑えたい</li><li>Jamstack！！</li></ul>などがありました。これらのことを考慮して今回マッチしたのが「Astro」でした。<h2 id="h51801b8ac5">プロジェクトのセットアップ</h2>Node.jsは<code>v16.12.0</code>またはそれ以上のバージョンをインストールされている前提で、以下のコマンドでプロジェクトを作成します。<pre><code>$ npm create astro@latest</code></pre>コマンド入力後、プロジェクト名やTypescriptを使用するかなどを聞かれますのでいい感じに答える。 聞かれることは以下の通りです。<ul><li>プロジェクト名を指定</li></ul><pre><code>Where would you like to create your new project? … ./watataku-portforio</code></pre>『watataku-portforio』という名前のプロジェクト名で作成したいので&nbsp;<code>./watataku-portforio</code>&nbsp;と入力して次に進みます。<ul><li>テンプレートの指定</li></ul><pre><code>? Which template would you like to use? › - Use arrow-keys. Return to submit.
❯ Just the basics (recommended)
 Blog
 Portfolio
 Documentation Site
 Empty project</code></pre>一番最初の『Just the basics (recommended)』の『基本のみ（推奨）』を選択します。<ul><li>依存モジュールのインストール</li></ul><pre><code>? Would you like to install yarn dependencies? (recommended) › (Y/n)</code></pre>『Y』をしていして依存モジュールのインストールを開始させます。<ul><li>Git リポジトリの初期化を実行</li></ul><pre><code>? Would you like to initialize a new git repository? (optional) › (Y/n)</code></pre>Gitリポジトリの初期化をしたいので『Y』を入力して次に進みます。<ul><li>TypeScriptの設定</li></ul><pre><code>? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
❯ Relaxed
 Strict (recommended)
 Strictest
 I prefer not to use TypeScript</code></pre>推奨となっている『Strict (recommended)』を選択します。 回答後、以下のコマンドで開発サーバを立ち上げ、http://localhost:3000にアクセスします。<pre><code>$ cd ./watataku-portforio

$ npm run dev</code></pre> <img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/bcbbb2a641ec421d905bf6e3c265b09e/astro-init-site.png" alt=""><h2 id="hc806dee726">Reactを追加する</h2>以下のコマンドを叩けばReactを追加(使えるように)できます。<pre><code>$ npx astro add react</code></pre> <pre><code>&nbsp;Resolving packages...


&nbsp; Astro will run the following command:
&nbsp; If you skip this step, you can always run it yourself later


&nbsp;╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
&nbsp;│ npm install @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0&nbsp; │
&nbsp;╰─────────────────────────────────────────────────────
? Continue? › (Y/n)</code></pre>Y を指定します。<pre><code>✔ Resolving packages...

 Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config'; │
 │ │
 │ import react from "@astrojs/react"; │
 │ │
 │ // https://astro.build/config │
 │ export default defineConfig({ │
 │ integrations: [react()] │
 │ }); │
 ╰───────────────────
? Continue? › (Y/n)</code></pre>Y を指定します。 ※今回はReactを追加しますがVue.jsやSvelteなども追加できます。詳しくはドキュメントをご覧ください。 <a href="https://docs.astro.build/ja/guides/integrations-guide/" target="_blank" rel="noopener noreferrer">https://docs.astro.build/ja/guides/integrations-guide/</a><h2 id="h81f6f126c0">microCMSの準備</h2>今回のサイトでのコンテンツ管理には「microCMS」と言うHedress CMSを使っています。 <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">https://microcms.io/</a> microCMSのアクセス方法や設定方法などは今回説明しないので自身でドキュメント等などでご覧ください。 この辺りを参考にしてみると良いかもです。 <a href="https://blog.microcms.io/astro-microcms-introduction" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/astro-microcms-introduction</a><h2 id="h222fd0f152">ポートフォリオに取り入れた機能</h2><ul><li>慣性スクロール</li></ul><a href="https://www.weblio.jp/content/慣性スクロール" target="_blank" rel="noopener noreferrer">https://www.weblio.jp/content/慣性スクロール</a> ぬるっと動く気持ちのいいスクロールですねw個人的にこのスクロール方式が好きなので、実装してみたいと思い実装しました。 今回は「ASScroll」と言うライブラリのお力をお借りして実装しました。 <a href="https://github.com/ashthornton/asscroll" target="_blank" rel="noopener noreferrer">https://github.com/ashthornton/asscroll</a> 導入方法は簡単です。 まず最初にライブラリをインストールします。<pre><code>$ npm install --save @ashthornton/asscroll</code></pre>次に下記Javascriptのコードを書いてあげます。<pre><code>import ASScroll from "@ashthornton/asscroll";

const asscroll = new ASScroll();
window.addEventListener("load", () =&gt; {
 	asscroll.enable();
});</code></pre>あとは慣性スクロールしたいところに<code>&lt;div asscroll-container&gt;</code>で囲むだけ。<pre><code>&lt;div asscroll-container&gt;
	 &lt;main&gt;
	 &lt;!-- The Y translation will be applied to this element --&gt;
 &lt;/main&gt;
&lt;/div&gt;</code></pre><ul><li>ダークモード</li></ul>こちらで詳しく記載しております。 <a href="https://watataku-blog.vercel.app/blog/tb7epr3_-z" target="_blank" rel="noopener noreferrer">https://watataku-blog.vercel.app/blog/tb7epr3_-z</a> ちなみにダークモードで見た際のサイト(ライトモードはサムネイル) <img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/806a1c38d1254371bee941836ff15dd6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-14%2018.30.12.png" alt=""><ul><li>ページング</li></ul>Astroではページング機能を簡単に実装できる関数があるので、それを今回使用させていただきました。 その関数が<code>paginate()</code>です。早速ページングの実装方法を見ていきましょう。 <code>./page/[...page].astro</code>を作成し下記のように<code>pagenate()</code>を使用します。<pre><code>// ---　
import type { Page, GetStaticPathsOptions } from "astro";

type Props = {
 page: Page&lt;Contents&gt;;
};

type Work = {
 contents: Contents[];
}

type Contents = {
 // 以下略
};

const { page } = Astro.props; 

export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
 　　const myMicroCMSApiUrlWork = `https://${
	 import.meta.env.MICROCMS_SERVICE_DOMAIN_PORTFOLIO
 }.microcms.io/api/v1/works?orders=-publishedAt?limit=999`;
	
	const response = await fetch(myMicroCMSApiUrlWork, {
	 headers: {
	 "X-MICROCMS-API-KEY": import.meta.env.MICROCMS_API_KEY_PORTFOLIO,
	 },
	});
	const getFetchDataWork: Work = await response.json();
	return paginate(getFetchDataWork.contents, { pageSize: 6 });
}
// ---</code></pre><code>getStaticPaths()</code> 関数の戻り値で<code>paginate()</code>を返すだけです。 ※コメントにしている「---」はハイラウトの都合上、わざと付けています。Astroを書く際は「---」をお忘れなくお願いします。 中身を見てみると、表示したいコンテンツを第 1 引数に、ページ内に表示したいコンテンツの数を第 2 引数に設定しておきます。 これでページングの設定が完了しましたのでテンプレートで使っていきましょう。<pre><code>&lt;div&gt;
 {
 page.data.map((work: Contents) =&gt;
 &lt;!-- 以下略 --&gt;
 ))
 }
&lt;/div&gt;
{
　　page.total &gt;= 6 &amp;&amp; (
	&lt;nav&gt;
	 {/* page.currentPageで現在ページ、page.lastPageで総ページ数を表示 */}
	 &lt;p&gt;
	 page {page.currentPage}/{page.lastPage}
	 &lt;/p&gt;
	 &lt;ul&gt;
	 　{/* page.url.prevがある場合は前ページへのリンクを表示 */}
	 {page.url.prev &amp;&amp; (
	 　　&lt;li&gt;
	 &lt;a href={page.url.prev}&gt;PREV&lt;/a&gt;
	 &lt;/li&gt;
	 )}
	 {/* page.url.nextがある場合は次ページへのリンクを表示 */}
	 {page.url.next &amp;&amp; (
	 &lt;li&gt;
	 &lt;a href={page.url.next}&gt;NEXT&lt;/a&gt;
	 &lt;/li&gt;
	 )}
	 &lt;/ul&gt;
　　　　&lt;/nav&gt;
　　)　
}</code></pre><h2 id="h3bcda3e6b0">最後に</h2>以上がAstroでポートフォリオサイトを作り直したと言うお話でした。 個人的にAstroとても書きやすくサクッと使える印象を受けました。また、他のUIフレームワークとも組み合わせて開発できるのも私としては嬉しいポイントでした。 みなさんもよければAstro使ってみてください

Astroでポートフォリオサイトを作った

<h2 id="h8d027c8ed3">はじめに</h2>おはようございます。こんにちは。こんばんは。 Watatakuと申します。技術ブログを作りました。よろしくお願いします。 今流行りのJamstackという手法で開発しています。 ホスティングはVercelを使用しています。 初回の今回はこのブログのことを書いていきます。 <a href="https://github.com/watataku8911/watataku-blog" target="_blank" rel="noopener noreferrer">ソースコード</a><h2 id="hed900658dc">環境</h2><ul><li>React:17.0.2</li><li>Next.js:v.12.0.7 (7/11日現在 : v.13.4.3)</li><li>typescript:v4.5.4</li></ul><h2 id="h49af616052">このブログで書いていくこと</h2>フロントエンドのことを中心にWeb（Jamatack）について書いていきます。<h2 id="hbd7b1c9fdb">このブログを作成した目的</h2>単純にブログを作りたかったからw 以上。 ・・・ではなく、真面目に回答していくと上記の動機もありますが他に下記に記載の理由があります。<ul><li>将来の自分の為の知識の貯蔵</li><li>自分と同じ問題にぶち当たっている人に対して、解決策を紹介したい</li><li>文章力向上の為</li></ul> 投稿頻度はさほど多くはないとは思いますがよろしくお願いします。

T.W

Next.js13のApp Routerについて勉強した

microCMSから取得してきたデータをNext.jsを使ってRSSフィードを生成する方法

Astroでポートフォリオサイトを作った

技術ブログを作ったよ。