NextUIを攻める.with Next.js
最近、NextUIというかっこよさげなUIキットを見つけたので、Next.jsのスターターページを軽くカスタマイズしながら遊んでみたいと思います。
まだ日本ユーザーによる情報がそんなに多くないため、軽くですが導入方法も解説しています。
NextUIの概要
時期は調べていないのですが、わりと最近にできたReact向けのUIキットです。開発スポンサーにはVercelが付いてるみたい。
2022/5/6現在ではBeta版としてリリースされているようですが、すでに結構仕上がってる感じがあります。使い心地はMUIにかなり近いです。
コアライブラリにはCSS-in-JSのStitchesを使っているようです。
以下、Stitches公式サイトからの引用です。
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
詳しく知りたい方は公式ページへ。
導入方法
今回はちょっと味見したいだけなので、シンプルにいかせてもらいます。
インスコするのは、
- Next
- NextUI
の2つのみです。
1 必要なものをインストール
Next.jsをインストールします。
ディレクトリ名はなんでもいいのですが、nextui-sample としました。
npx create-next-app nextui-sample
次に、今回使用するNextUIのnpmパッケージををインストールします。
npm install @nextui-org/react
今回はシンプルに行くので、これでインストール作業は終わり。
インストールが終わったら、$ npm run devでローカルサーバを立ち上げ、ブラウザで localhost:3000 にアクセス。いつものこの画面が表示されれば OK です。
2 _app.js に追記
まずは_app.jsを以下のように編集します。
やってることとしては、すべてのページをNextUIProviderでラップしているだけです。
//最初から居るglobals.cssは消さないで残しておく。
import '../styles/globals.css'
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }) {
return (
// 2. Use at the root of your app
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;
3 _document.js の作成・追記
SSRでNextUIを使うため必要な記述です。上記公式Docsのコードをそのまま使います。
pagesディレクトリ直下に_document.jsファイルを作成し、以下の内容をペーストします。
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: <>{initialProps.styles}</>
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
これで Next.js × NextUI の準備が整いました！このあたりの作業もMUIと通ずるものがありますね。導入方法については以上です。
NextUIを実際に触ってみた
今回はがっつり触っておらず、Next.jsのスターターページをNextUIのコンポーネントでリプレイスしたり、スタイル調整をしたり程度です。出来上がりはこんな感じに。
コードすべてを見たい方は、Githubからどうぞ。
使い心地
使い心地はMUIv5にかなり近く、直感的で使いやすいです。
あとは、テーマのカスタマイズするぞ！ってなった時にベースライブラリのStitchesが好きになれるかどうか、という感じだと思います。（まだ試してない）
デザイン
コンポーネントのデザインや配色が初手からイケていて、陰 陽キャの私も満足でした。
今回使ったコンポーネント紹介
//今回使ったコンポーネントたち
import { Link, Grid, Card, Text, Row } from "@nextui-org/react";
リンクカードの実装を一部紹介
//こんな感じにコンポーネント作った
const LinkCard = ({ url, title, text }) => {
return (
<>
<Link href={url}>
<Card clickable bordered>
<Text
css={{ textGradient: "45deg, $blue500 -20%, $red500 100%" }}
h2
>{`${title} ->`}</Text>
<Text p>{text}</Text>
</Card>
</Link>
</>
);
};
作成したコンポーネントをGridでラップしてレイアウトを作っています。楽だ。
<Grid.Container
gap={2}
justify="center"
alignItems="center"
css={{ maxW: 800, marginTop: 100 }}
>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://nextjs.org/docs"
title="Documentation"
text="Find in-depth information about Next.js features and API."
/>
</Grid>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://nextjs.org/learn"
title="Learn"
text="Learn about Next.js in an interactive course with quizzes!"
/>
</Grid>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://github.com/vercel/next.js/tree/canary/exampless"
title="Examples"
text="Discover and deploy boilerplate example Next.js projects."
/>
</Grid>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
title="Deploy"
text="Instantly deploy your Next.js site to a public URL with Vercel."
/>
</Grid>
</Grid.Container>
最後に
NextUIは、デザインも使い心地も申し分ないです。
今回はシンプルなコンポーネントしか使っていませんが、高機能なコンポーネントを複数使った時にどのぐらい重くなるのかが気になってます。
次回は、重めのコンポーネントを召喚しまくって、ちゃんとデプロイしてみて、パフォーマンスがどんなものか見てみたいと思います。見せてもらおうか、near-zero runtimeの実力とやらを。
Discussion