【Next.js】簡単なブログサイトを作る(JavaScript編)
Next.jsでWEBサイトを作成するまでの一連の流れをメモしていきます。
今回はJavaScriptを使った簡単なブログ作成をしています。
また基本的にコマンドやコードの全体像把握を目的としているので、詳細部分はNext.jsのドキュメントや公式チュートリアルを参考にしてみてください。
目次
⑴ Next.jsのアプリケーションを作成する
まずはNext.jsのプロジェクトを置くためのディレクトリを作成し、そのディレクトリに移動します。
$ mkdir blog_project # 「blog_project」部分は自由(ディレクトリ名)
$ cd blog_project
作成したディレクトリ内で、Next.jsのアプリケーションを作成します。
$ npx create-next-app blog # 「blog」部分は自由(アプリケーション名)
これでNext.jsのアプリケーションが作成できました。
⑵ TOPページを確認する
アプリケーションが作成できたら下記コマンドでTOPページを確認できます。
TOPページの内容はpages/index.js
に記載されています。
$ npm run dev
⑶ 各ページの共通部分を作成する
ヘッダーやフッターなどの各ページ共通部分を作成します。また共通部分を適用するためのレイアウトも作成します。
それぞれのファイルはcompomentsフォルダを作成してそこに追加していきます。
- 共通ヘッダー(components/Header.js)
- 共通フッター(components/Footer.js)
- 共通レイアウト(components/Layout.js)
共通ヘッダーを作成する
共通ヘッダーとなるヘッダーコンポーネントを作成します。
components内にHeader.js
を作成して下記を記載します。
import React from 'react';
export default function Header(props) {
return (
<header className={""}>
// ここにヘッダーに表示したい内容を書く
</header>
);
}
共通フッターを作成する
共通フッターとなるフッターコンポーネントを作成します。
components内にFooter.js
を作成して下記を記載します。
import React from 'react';
export default function Footer(props) {
return (
<footer className={""}>
// ここにフッターに表示したい内容を書く
</footer>
);
}
共通レイアウトを作成する
作成した共通ヘッダーと共通フッターを表示する「レイアウト」を作成します。各ページでこのレイアウトを読み込むことでヘッダーとフッターが組み込まれるようになります。
components内にLayout.js
を作成して下記を記載します。
import React from 'react';
import Header from "./Header"; // 共通ヘッダー
import Footer from "./Footer"; // 共通フッター
export default function Layout({ children }) {
return (
<>
// =============================
// ヘッダー
// =============================
<Header />
// =============================
// 各ページのコンテンツ
// =============================
<main>
{ children } // このchildrenに各ページのコンテンツが入る
</main>
// =============================
// フッター
// =============================
<Footer />
</>
);
}
⑷ 共通レイアウトをTOPページに適用する
index.jsファイルのreturn部分を<Layout></Layout>
で囲むことによって、先ほど作成したLayoutが反映されます。
import Layout from "../components/Layout";
export default function Home(props) {
return (
<Layout> // 追加
...
</Layout> // 追加
)
}
⑸ 新しくページを作成する
「TOPページ」とは別に新しく「記事一覧ページ」と「記事ページ」を作成します。
また今回使用する記事のデータは「JSONPlaceholder」というサイトにあるテストデータを取得しようと思います。
- 記事一覧ページ(/posts)
- 記事ページ(/posts/[id])
blog
├ ...
├ pages
├ posts // ※作成(ディレクトリ)
├ [id].js // ※作成: 記事ページ → /posts/[id]
└ index.js // ※作成: 記事一覧ページ → /posts
└index.js // TOPページ → /
├ ...
└ ...
「記事一覧ページ」を作成する
外部APIから記事一覧データを取得して、それをページに表示します。
import React from 'react';
import Layout from "../components/Layout";
export default function Posts({posts}) {
return (
<Layout>
<ul>
{posts &&
posts.map((post) =>
<li>{post.title}</li>
)}
</ul>
</Layout>
);
}
export const getServerSideProps = async () => {
const res_posts = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await res_posts.json()
return{
props: {
posts, // 記事一覧データ
},
}
}
「記事詳細ページ」を作成する
外部APIから1件データを取得して、それをページに表示します。
import React from 'react';
import Layout from "../components/Layout";
export default function PostId({posts}) {
return (
<Layout>
<ul>
{posts &&
posts.map((post) =>
<li>{post.title}</li>
)}
</ul>
</Layout>
);
}
export const getServerSideProps = async ({params}) => {
const post_id = params.id
const res_post = await fetch(`https://jsonplaceholder.typicode.com/posts/${post_id}`)
const post = await res_post.json()
return{
props: {
post, // 記事データ
},
}
}
これで基本は完成
ここまでで基本の形が完成しました。
あとは必要なページを増やしたり、コンポーネントを作成したりすることでサイトを充実させていきましょう。
おまけ
Tailwindを導入する
CSSフレームワークの「Tailwind」を導入することで、よりCSSの管理がしやすくなります。
Google Analytics等を導入する
サイトデータ解析をするために「Google Analytics」や「Google Tag manager」を導入していきます。
(※後日更新予定)
Vercelにデプロイする
作成したアプリケーションをVercelにデプロイしてサイトを誰でも閲覧できるようにします。
(※後日更新予定)
faviconを作成する
(※後日更新予定)