LoginSignup
2
0

More than 1 year has passed since last update.

@minimumskills(Minimum Skills)inbluecode株式会社

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

Last updated at Posted at 2023-03-13

概要

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

完成イメージ

000001.jpg 000010.jpg

ナビゲーションバー作成

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

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

フッター作成

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

保存して確認します。
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;
    }
}

関連

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0