firebase+Next.js　ログイン機能が実装できない

next.js初心者です
create-next-app にwith firebaseをしてアプリを作り、
ログイン機能の実装に取り掛かったのですが、
エラーです

git 同じ内容のエラー
この記事を参考に少しいじったのですが解決しませんでした

error - FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at app (/Users/user/test/with-firebase-app/node_modules/@firebase/app/dist/index.node.cjs.js:358:33)
    at Object.serviceNamespace [as firestore] (/Users/user/test/with-firebase-app/node_modules/@firebase/app/dist/index.node.cjs.js:409:51)
    at eval (webpack-internal:///./firebase/clientApp.js:37:64)
    at Module../firebase/clientApp.js (/Users/user/test/with-firebase-app/.next/server/pages/_app.js:116:1)
    at __webpack_require__ (/Users/user/test/with-firebase-app/.next/server/pages/_app.js:23:31)
    at eval (webpack-internal:///./context/userContext.js:7:77)
    at Module../context/userContext.js (/Users/user/test/with-firebase-app/.next/server/pages/_app.js:104:1)
    at __webpack_require__ (/Users/user/test/with-firebase-app/.next/server/pages/_app.js:23:31)
    at eval (webpack-internal:///./pages/_app.js:5:78)
    at Module../pages/_app.js (/Users/user/test/with-firebase-app/.next/server/pages/_app.js:128:1) {
  code: 'app/no-app',
  appName: '[DEFAULT]'


:3000/:1 GET http://localhost:3000/ 500 (Internal Server Error)
}

pages/index.js

import Head from 'next/head'
import { useEffect } from 'react'
import { useUser } from '../context/userContext'
import firebase from '../firebase/clientApp'
import Link from 'next/link'

export default function Home() {
  // Our custom hook to get context values
  const { loadingUser, user } = useUser()

  useEffect(() => {
    if (!loadingUser) {
      // You know that the user is loaded: either logged in or out!
      console.log(user)
    }
    // You also have your firebase app initialized
    console.log(firebase)
  }, [loadingUser, user])

  return (
    <div className="container">
      <Head>
        <title>Next.js w/ Firebase Client-Side</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className="title">Next.js w/ Firebase Client-Side</h1>
        <p className="description">Fill in your credentials to get started</p>
      </main>

      <Link href="./auth/Login.js">
        <a>Login</a>
      </Link>

      <Link href="./auth/SignUp.js">
        <a>Login</a>
      </Link>

      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  )
}

firebase/clientApp.js
いつものconfig.jsと同じような扱い？

import firebase from 'firebase/app'
import 'firebase/auth' // If you need it
import 'firebase/firestore' // If you need it
import 'firebase/storage' // If you need it
import 'firebase/analytics' // If you need it

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

// Check that `window` is in scope for the analytics module!
// if (typeof window !== 'undefined' && !firebase.apps.length) {
//   firebase.initializeApp(clientCredentials)
//   // To enable analytics. https://firebase.google.com/docs/analytics/get-started
//   if ('measurementId' in clientCredentials) firebase.analytics()
// }

const db = firebase.firestore()

const collection =db.collection('messages');

collection.add({
  messages: 'test'
})
.then(doc =>{
  console.log(`${dvo.id} added`);
})
.catch(error =>{
  console.log(error)
})
export const auth = firebase.auth();
export default !firebase.apps.length ? firebase.initializeApp(clientCredentials) : firebase.app();

pages/auth/SignUp.jsx

import React, { useContext } from "react";
import { withRouter } from "react-router";
import { AuthContext } from "./AuthProvider";

const SignUp = ({ history }) => {
  const { signup } = useContext(AuthContext);
  // AuthContextからsignup関数を受け取る
  const handleSubmit = event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    signup(email.value, password.value, history);
  };

  return (
    <div>
      <h1>Sign up</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email
          <input name="email" type="email" placeholder="Email" />
        </label>
        <label>
          Password
          <input name="password" type="password" placeholder="Password" />
        </label>
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
};

export default withRouter(SignUp);

Login.js

import React, { useContext } from "react";
import { withRouter } from "react-router";
import { AuthContext } from "./AuthProvider";

const Login = ({ history }) => {
  const { login } = useContext(AuthContext);

  // AuthContextからlogin関数を受け取る
  const handleSubmit = event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    login(email.value, password.value, history);
  };

  return (
    <div>
      <h1>Log in</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email
          <input name="email" type="email" placeholder="Email" />
        </label>
        <label>
          Password
          <input name="password" type="password" placeholder="Password" />
        </label>
        <button type="submit">Log in</button>
      </form>
    </div>
  );
};

export default withRouter(Login);

pages/auth/AuthProvider


import React, { useEffect, useState } from "react";
import { app } from ".../firebase/clientApp";

// contextの作成
export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  // ユーザーをログインさせる関数
  const login = async (email, password, history) => {
    try {
      await app.auth().signInWithEmailAndPassword(email, password);
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  // 新しいユーザーを作成しログインさせる関数
  const signup = async (email, password, history) => {
    try {
      await app.auth().createUserWithEmailAndPassword(email, password);
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  useEffect(() => {
    app.auth().onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    // Contextを使用して認証に必要な情報をコンポーネントツリーに流し込む。
    <AuthContext.Provider
      value={{
        login: login,
        signup: signup,
        currentUser
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

.env
# TODO. Fill in with Firebase Config
NEXT_PUBLIC_FIREBASE_API_KEY="******",
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="*****",
NEXT_PUBLIC_FIREBASE_DATABASE_URL="******",
NEXT_PUBLIC_FIREBASE_PROJECT_ID= "n*****5f",
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="******m",
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="9****",
NEXT_PUBLIC_FIREBASE_APP_ID= "*******",

正直全く何が足りないのかわからないので、これから本買いに行きます。

ファイル構成
https://gyazo.com/fcc2fb08d13a53301ac1a430de2c26cd

環境
Next.js