Next.js×Flaskでログイン機能を実装する

Next.jsとFlaskを組み合わせたウェブアプリケーションの開発では、フロントエンドとバックエンドの連携が重要です。この記事では、Next.jsをフロントエンド、Flaskをバックエンドとして使用し、ログイン機能を実装する方法について詳しく説明します。

1. 環境の準備

必要なツールのインストール

まず、Next.jsとFlaskを使用するための環境を整えます。


# Next.jsプロジェクトの作成
npx create-next-app nextjs-flask-login
cd nextjs-flask-login

# 必要なパッケージのインストール
npm install axios

# Flaskのインストール
pip install Flask Flask-Cors Flask-JWT-Extended

フロントエンドとバックエンドのディレクトリ構成

以下のようなディレクトリ構成を使用します。


nextjs-flask-login/
├── backend/
│   ├── app.py
│   ├── models.py
│   └── ...
├── pages/
│   ├── index.js
│   └── login.js
├── public/
├── styles/
├── .gitignore
├── package.json
└── ...

2. Flaskバックエンドの構築

Flaskアプリケーションの設定

backend/app.pyファイルを作成し、基本的なFlaskアプリケーションを設定します。

from flask import Flask, request, jsonify
from flask_cors import CORS
from flask_jwt_extended import JWTManager, create_access_token

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'your_jwt_secret_key'
CORS(app)
jwt = JWTManager(app)

users = {"testuser": "testpassword"}

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username in users and users[username] == password:
        access_token = create_access_token(identity=username)
        return jsonify(access_token=access_token), 200
    else:
        return jsonify({"msg": "Bad username or password"}), 401

if __name__ == '__main__':
    app.run(debug=True)

3. Next.jsフロントエンドの構築

ログインページの作成

pages/login.jsファイルを作成し、ログインフォームを構築します。

import { useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/router';

export default function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const router = useRouter();

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('http://localhost:5000/login', {
                username,
                password
            });
            localStorage.setItem('token', response.data.access_token);
            router.push('/');
        } catch (error) {
            console.error('Error logging in', error);
            alert('Login failed');
        }
    };

    return (
        <div>
            <h1>Login</h1>
            <form onSubmit={handleLogin}>
                <input
                    type="text"
                    placeholder="Username"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    required
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                />
                <button type="submit">Login</button>
            </form>
        </div>
    );
}

ホームページの作成

pages/index.jsファイルを作成し、ユーザーのログイン状態を確認します。

import { useEffect, useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/router';

export default function Home() {
    const [user, setUser] = useState(null);
    const router = useRouter();

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (!token) {
            router.push('/login');
        } else {
            // Token validation logic here (e.g., decoding or verifying with the backend)
            setUser({ username: 'testuser' });
        }
    }, []);

    return (
        <div>
            <h1>Welcome, {user ? user.username : 'Guest'}!</h1>
        </div>
    );
}

4. 動作確認

バックエンドの起動

backendディレクトリでFlaskアプリケーションを起動します。

python app.py

フロントエンドの起動

Next.jsアプリケーションを起動します。

npm run dev

ブラウザでhttp://localhost:3000にアクセスし、ログインページからログインを試みます。正しい認証情報を入力すると、ホームページにリダイレクトされます。

まとめ

Next.jsとFlaskを組み合わせることで、効率的かつスケーラブルなウェブアプリケーションを構築できます。本記事では、基本的なログイン機能の実装方法を説明しましたが、セキュリティの強化や追加機能の実装により、さらに高度なアプリケーションを作成することが可能です。ぜひ、この手法を活用して、自分だけのウェブアプリケーションを開発してみましょう！

アルアカ - Arcadia Academia