Open1

Next.js(App Router)のはまったポイント

きりときりと

※初歩的ミスの巻

Google認証でlocalhostなのに「インターネットに接続できません」が出てくる

自分で作ったNext.jsのレーダーチャートのサイトに、このサイトを参考に、Google認証を追加した。

そしたら、localhostなのに「インターネットに接続できません」が出てきた

解決策

トップレベルのpage.tsxをこう変えたらいけた

いけてなかったコード

page.tsx
"use client";

import UserState from "./components/UserState";
import RadarChartPage from "./RadarChartPage";

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between p-24">
      <UserState />
      <RadarChartPage />
    </main>
  );
}

いけたコード

page.tsx
"use client";

import UserState from "./components/UserState";

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between p-24">
      <UserState />      
    </main>
  );
}

おそらくの原因

  • 背景用のコンポーネントがボタンに被っててクリックできなかった
  • Google APIの方の設定の更新の反映に時間がかかった
background.tsx
import React from "react";

const Background: React.FC = () => {
  return (
    <div className="fixed inset-0 bg-gradient-to-b from-pink-200 via-yellow-200 to-orange-200 opacity-50 z-0"></div>
  );
};

export default Background;