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

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

# 完成イメージ
<img width="1540" alt="000001.jpg" src="https://dl.dropbox.com/s/2xl9fh6vfiup851/000001.jpg">
<img width="1540" alt="000010.jpg" src="https://dl.dropbox.com/s/u35gpvpq9laipce/000010.jpg">


# ナビゲーションバー作成
## Navbar.js
componentsというフォルダを作成して、その中にパーツを作って入れていきます。

```
mkdir pages/components
touch pages/components/Navbar.js
```
基本構造を記述し、中身は[フロントエンド開発](https://qiita.com/minimumskills/private/0a41bb64480c88505c3b)で作成した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名の変更をします。
変更後は下記のようになります。

```diff_javascript: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ではなくなります。

```diff_javascript: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>
        )
    }
```
```javascript:コピペ用
<li><Link href="/">WebSite</Link></li>
<li><Link href="/">TOP</Link></li>
<li><Link href="/contact">CONTACT</Link></li>
```



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

```diff_javascript:_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
```

```javascript:コピペ用
return (
    <div className="App">
      <Navbar />
      <Component {...pageProps} />
    </div>
)
```
保存して確認します。
<img width="1495" alt="000020.jpg" src="https://dl.dropbox.com/s/x7ie28olpxsjyxu/000020.jpg">
ナビゲーションバーができました。
各ページに遷移できることを確認します。

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

```
touch pages/components/Footer.js
```
Navbar同様に[フロントエンド開発](https://qiita.com/minimumskills/private/0a41bb64480c88505c3b)から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を読み込みます。

```diff_javascript:_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
```


保存して確認します。
<img width="1540" alt="000030.jpg" src="https://dl.dropbox.com/s/tb4fkmxuhn30dlc/000030.jpg">

# 最終的なコード
## Navbar.js

```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

```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

```_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

```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.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で簡易コーポレートサイトを作成する #3 -バリデーションとビルド編-](https://qiita.com/minimumskills/private/c1a0fee30d386c76a8f4)
- 前：[Next.jsで簡易コーポレートサイトを作成する #1 -Home/Contactコンポーネント編-](https://qiita.com/minimumskills/private/a044d4abafb72c3e1681)