【Next.js入門②】Next.jsでComponentを使ってみる

こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。

筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。

Componentを使ってみる

次にNext.jsでComponentを使用して画面描画をしてみましょう。

前回の記事で使用した以下のコードをそのまま、Componentに書き換えてみます。

前回のコード
pages/index.js

const Index = () => (
    <div>
      <p>Hello Next.js</p>
    </div>
  );
  
  export default Index;
|

以下に書き換える

import React from 'react';

class Index extends React.Component{
    render() {
        return (
            <div>
                <p>Hello Next.js</p>
            </div>
        )
    }
}
  
  export default Index;

前回と全く同じ画面が描画されたはずです。

別のページも作成してみましょう。

pages/about.js

import React from 'react';

class About extends React.Component{
    render() {
        return (
            <div>
                <p>This is about page.</p>
            </div>
        )
    }
}

export default About;

このページにアクセスするには、
http://localhost:3000/about
とURLを入力しましょう。そうすると表示されたはずです。

Next.jsでは、このように表示するjsファイルがURLのGETパラメータから指定できます。

各ページの作成

以下の3つのjsファイルも作成しておきましょう。
pages/portfolios.js

import React from 'react';

class Portfolios extends React.Component{
    render() {
        return (
            <div>
                <p>This is Portfolios page.</p>
            </div>
        )
    }
}

export default Portfolios;

pages/blogs.js

import React from 'react';

class Blogs extends React.Component{
    render() {
        return (
            <div>
                <p>This is Blogs page.</p>
            </div>
        )
    }
}

export default Blogs;

pages/cv.js

import React from 'react';

class Cv extends React.Component{
    render() {
        return (
            <div>
                <p>This is Cv page.</p>
            </div>
        )
    }
}

export default Cv;

それぞれブラウザでアクセスし、確認してみましょう。

ナビゲーションの作成

Indexページにナビゲーションを作成していきましょう。

pages/index.js

import React from 'react';

class Index extends React.Component{
    render() {
        return (
            <div>
                <p>Hello Next.js</p>
                <a href='/'>Home</a>
                <a href='/about'>About</a>
                <a href='/portfolios'>Portfolio</a>
                <a href='/blogs'>Blog</a>
                <a href='/cv'>CV</a>
            </div>
        )
    }
}

export default Index;

以下のように画面遷移ができるナビが完成しました。