More than 1 year has passed since last update.

bluecode株式会社

Next.jsで簡易コーポレートサイトを作成する #2 -ナビゲーションバーとフッター編-

Last updated at 2023-03-13Posted at 2023-03-13

概要

ナビゲーションバーとフッターを作成します。

完成イメージ

ナビゲーションバー作成

Navbar.js

componentsというフォルダを作成して、その中にパーツを作って入れていきます。

mkdir pages/components
touch pages/components/Navbar.js

基本構造を記述し、中身はフロントエンド開発で作成したwebsiteのindex.htmlから<nav>〜</nav>をコピーしてきて内容を記述します。
リンク先は適切に変更します。

pages/components/Navbar.js


export default function Navbar() {
    return (
        <nav class="nav">
            <ul>
                <li><a href="./index.html">WebSite</a></li>
                <li><a href="./index.html">TOP</a></li>
                <li><a href="./contact.html">CONTACT</a></li>
            </ul>
        </nav>
    )
}

Navbar.module.css

stylesフォルダにNavbar.module.cssを作成し、ナビゲーションバー構成に必要なスタイルを記述します。

touch styles/Navbar.module.css

styles/Navbar.modules.css

.nav {
    /* 背景色設定 */
    background-color: #666;
}

.nav ul {
    /* 表示幅を90%に */
    width: 90%;
    /* フレックスボックス化 */
    display: flex;
    /* 先頭のポチをなくす */
    list-style: none;
    /* 余白の自動調整 （上下の余白は0、左右は自動調整）*/
    margin: 0 auto;
    /* 高さを50pxに指定 */
    height: 50px;
}

.nav a {
    /* アンダーライン削除 */
    text-decoration: none;
    /* 文字色設定 */
    color: #fff;
    /* 内側余白を上右下左の順で設定 */
    padding: 10px 20px 10px 0px;
    /*ブロックにする */
    display: block;
    /* 文字を大き目に設定 */
    font-size: large;
}

.nav a:hover {
    /* マウスオーバーした時の文字色を設定 */
    color: #aaa;
}

/*スマホ対応*/
@media screen and (max-width: 640px) {
    .nav {
        background-color: #0183a0;
        height: 150px;
    }

    .nav ul {
        flex-direction: column;
        padding: 0;
    }

    .nav li {
        border-bottom: solid 1px #fff;
    }
}

読み込み、className変更

Navbar.jsの上部でスタイルを読み込みとclass名の変更をします。
変更後は下記のようになります。

pages/components/Navbar.js

+   import styles from '../../styles/Navbar.module.css';

    export default function Navbar() {
        return (
+           <nav className={styles.nav}>
-           <nav class="nav">
                <ul>
                    <li><a href="./index.html">WebSite</a></li>
                    <li><a href="./index.html">TOP</a></li>
                    <li><a href="./contact.html">CONTACT</a></li>
                </ul>
            </nav>
        )
    }

next/linkの利用

リンクする場合、next.jsではaタグは使わずnext/linkを使います。
また、リンク先のURLはhtmlではなくなります。

pages/components/Navbar.js

+   import Link from 'next/link';
    import styles from '../../styles/Navbar.module.css';

    export default function Navbar() {
        return (
            <nav className={styles.nav}>

                <ul>
-                   <li><a href="./index.html">WebSite</a></li>
-                   <li><a href="./index.html">TOP</a></li>
-                   <li><a href="./contact.html">CONTACT</a></li>
+                   <li><Link href="/">WebSite</Link></li>
+                   <li><Link href="/">TOP</Link></li>
+                   <li><Link href="/contact">CONTACT</Link></li>
                </ul>
            </nav>
        )
    }

コピペ用

<li><Link href="/">WebSite</Link></li>
<li><Link href="/">TOP</Link></li>
<li><Link href="/contact">CONTACT</Link></li>

共通部分で読み込み

全ページでナビゲーションバーを表示させたいので、_app.jsを編集して読み込み、追加します。

_app.js

    import '../styles/globals.css'
+   import Navbar from './components/Navbar'

    function MyApp({ Component, pageProps }) {
-       return <Component {...pageProps} />
     
+       return (
+           <div className="App">
+             <Navbar />
+             <Component {...pageProps} />
+           </>
+       )
    }

    export default MyApp

コピペ用

return (
    <div className="App">
      <Navbar />
      <Component {...pageProps} />
    </div>
)

保存して確認します。

ナビゲーションバーができました。
各ページに遷移できることを確認します。

フッター作成

Footer.js

componentsにFooter.jsを作成し、フッターの内容を作成します。

touch pages/components/Footer.js

Navbar同様にフロントエンド開発からFooter部分をコピペしてきます。
クラス名とstyleを読み込むことを想定してこのようになります。

pages/components/Footer.js

import styles from "../../styles/Footer.module.css"

export default function Footer(){
    return(
        <footer className={styles.footer}>
            © 2022 bluecode all rights reserved.
        </footer>
    )
}

Footer.module.css

stylesフォルダにFooter.module.cssを作成しスタイルを調整します。

touch styles/Footer.module.css

styles/Footer.module.css

.footer {
    background-color: #666;
    height: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 100vh;
}
/*スマホ対応*/
@media screen and (max-width: 640px) {
    .footer {
        background-color: #0183a0;
    }
}

共通部分で読み込み

作成したFooterを読み込みます。

_app.js

    import '../styles/globals.css'
    import Navbar from './components/Navbar'
+   import Footer from './components/Footer'

    function MyApp({ Component, pageProps }) {
      return (
        <div className="App">
        <Navbar />
        <Component {...pageProps} />
+       <Footer />
        </div>
      )
    }

    export default MyApp

保存して確認します。

最終的なコード

Navbar.js

import Link from 'next/link';
import styles from '../../styles/Navbar.module.css';

export default function Navbar() {
    return (
        <nav className={styles.nav}>
            <ul>
                <li><Link href="/">WebSite</Link></li>
                <li><Link href="/">TOP</Link></li>
                <li><Link href="/contact">CONTACT</Link></li>
            </ul>
        </nav>
    )
}

Navbar.module.css

.nav {
    /* 背景色設定 */
    background-color: #666;
}

.nav ul {
    /* 表示幅を90%に */
    width: 90%;
    /* フレックスボックス化 */
    display: flex;
    /* 先頭のポチをなくす */
    list-style: none;
    /* 余白の自動調整 （上下の余白は0、左右は自動調整）*/
    margin: 0 auto;
    /* 高さを50pxに指定 */
    height: 50px;
}

.nav a {
    /* アンダーライン削除 */
    text-decoration: none;
    /* 文字色設定 */
    color: #fff;
    /* 内側余白を上右下左の順で設定 */
    padding: 10px 20px 10px 0px;
    /*ブロックにする */
    display: block;
    /* 文字を大き目に設定 */
    font-size: large;
}

.nav a:hover {
    /* マウスオーバーした時の文字色を設定 */
    color: #aaa;
}

/*スマホ対応*/
@media screen and (max-width: 640px) {
    .nav {
        background-color: #0183a0;
        height: 150px;
    }

    .nav ul {
        flex-direction: column;
        padding: 0;
    }

    .nav li {
        border-bottom: solid 1px #fff;
    }
}

_app.js

import '../styles/globals.css'
import Navbar from './components/Navbar'
import Footer from './components/Footer'

export default function App({ Component, pageProps }) {
  return (
    <div className="App">
      <Navbar />
      <Component {...pageProps} />
      <Footer />
    </div>
  )
}

Footer.js

import styles from "../../styles/Footer.module.css"

export default function Footer() {
    return (
        <footer className={styles.footer}>
            © 2022 bluecode all rights reserved.
        </footer>
    )
}

Footer.module.css

.footer {
    background-color: #666;
    height: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 100vh;
}

/*スマホ対応*/
@media screen and (max-width: 640px) {
    .footer {
        background-color: #0183a0;
    }
}

Next.jsで簡易コーポレートサイトを作成する #2 -ナビゲーションバーとフッター編-

概要

完成イメージ

ナビゲーションバー作成

Navbar.js

Navbar.module.css

読み込み、className変更

next/linkの利用

共通部分で読み込み

フッター作成

Footer.js

Footer.module.css

共通部分で読み込み

最終的なコード

Navbar.js

Navbar.module.css

_app.js

Footer.js

Footer.module.css

関連