【Next.js/PrimeReact】Welcomeページ作ってみた

開発環境構築

npm install

npx creat-next-app welcome-app
cd welcome-app
npm run dev

※で、なぜか私ここでいつも通りlocalhost:3000でアクセスしようとしたらできなかったから原因追求してみた

Node.jsのバージョンが古かったっぽい

エラーメッセージ長すぎてはらないけど
調べたら「Node.js」のバージョン古いよ〜てことだった

voltaで、Node.jsのバージョンを公式推奨の16.0.0に変えた

volta install node@16.0.0

そしたらアクセス完了！

必要なパッケージのインストール

npm install next react react-dom primeicons primereact

Welcomeページのコード

pages/index.tsx

import React from 'react';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import { Panel } from 'primereact/panel';
import { Sidebar } from 'primereact/sidebar';
import { Toast } from 'primereact/toast';

const IndexPage = () => {
  const toast = React.useRef<Toast>(null);
  const [visibleSidebar, setVisibleSidebar] = React.useState(false);

  const showToast = () => {
    if (toast.current) {
      toast.current.show({
        severity: 'success',
        summary: 'Success',
      });
    }
  };

  return (
    <>
      <Sidebar visible={visibleSidebar} onHide={() => setVisibleSidebar(false)}>
        <h3 style={{ textAlign: 'center' }}>Sidebar</h3>
        <Button label="Close" className="p-button-secondary" onClick={() => setVisibleSidebar(false)} />
      </Sidebar>
      <Panel header="Welcome" style={{ margin: '2em auto', maxWidth: 600 }}>
        <Card>
          <h3>Hello, PrimeReact!</h3>
          <p>This is a sample Welcome page using PrimeReact UI components.</p>
          <Button label="Open Sidebar" onClick={() => setVisibleSidebar(true)} />
          <Button label="Show Toast" className="p-button-success" onClick={showToast} />
        </Card>
      </Panel>
      <Toast ref={toast} />
    </>
  );
};

export default IndexPage;

このコードでは、以下の PrimeReact コンポーネントを使用しています。

• Button
• Card
• Panel
• Sidebar
• Toast

Welcome ページには、パネルヘッダーとして "Welcome" というテキストが含まれ、
カードには "Hello, PrimeReact!" というテキストが含まれます。
サイドバーを開くためのボタンと、成功トーストを表示するためのボタンがあります。

最後に、pages/_app.tsx ファイルに以下のコードを追加します。

import 'primeflex/primeflex.css';
import 'primereact/resources/primereact.min.css';
import 'primereact/resources/themes/mdc-light-deeppurple/theme.css';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

このコードでは、次のことを行っています。

• primeflex スタイルシートのインポート
• PrimeReact のテーマの適用
• グローバルスタイルのインポート

これで、Next.js で PrimeReact を使用して Welcome ページを作成する準備が整いました。

こちらが完成の図です。