【Next.js】簡単なブログサイトを作る（JavaScript編）

2022/12/20

2023/1/20

Next.jsでWEBサイトを作成するまでの一連の流れをメモしていきます。

今回はJavaScriptを使った簡単なブログ作成をしています。

また基本的にコマンドやコードの全体像把握を目的としているので、詳細部分はNext.jsのドキュメントや公式チュートリアルを参考にしてみてください。

⑴ Next.jsのアプリケーションを作成する
⑵ TOPページを確認する
⑶ 各ページの共通部分を作成する
⑷ 共通レイアウトをTOPページに適用する
⑸ 新しくページを作成する
- 「記事一覧ページ」を作成する
- 「記事詳細ページ」を作成する
これで基本は完成
おまけ

⑴ 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,  // 記事データ
        },
    }
}