😸

【NextJs14】NextJs14 と便利なライブラリ【#３Groups Layout】

2023/12/11に公開

Next.js

clerk

tech

【#３Groups Layout】

YouTube: https://youtu.be/1GbzxB7_FDU

https://youtu.be/1GbzxB7_FDU

今回は前回作成したログインフォームを
中央寄せになるように調整していきます。

やり方はいくつかあるのですが、
NextJsの「Groups」を使用して、
その中に「layout.tsx」を作成して実装します。

まずは以下のファイルに「height:100%;」の追記を行います。

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
:root {
  height: 100%;
}

次に「app」フォルダ直下に「(auth)」というフォルダを作成します。
こちらが「Groups」を意味しており、

パスに影響を与えずページをグループ化することができます。

この「(auth)」フォルダに「sign-in」「sign-up」のフォルダを移動して、
同じ階層に「layout.tsx」を作成します。

app/(auth)/layout.tsx

const AuthLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className="flex w-full h-full bg-white items-center justify-center">
      {children}
    </div>
  );
};

export default AuthLayout;

【#３Groups Layout】

Discussion