Next.js入門
Next.jsはじめての環境構築備忘録
公式をメインにまとめ
編集中
実施環境
項目 | 詳細 |
---|---|
PC | MacBook Pro(14インチ、2021)Apple M1 Pro |
OS | MacOS Monterey 12.3 |
Node.js | v16.14.2(インストール済み前提) |
Next.js | v12.1.5 |
Next.js 概要
オープンソースで提供されるReactベースのフロントエンドフレームワーク。
Reactでの開発に必要な機能(SSRやルーティングなど)をあらかじめ備えている。
Hello world
プロジェクトの生成
create next-appでプロジェクト生成可能。
--tsオプションでtypescript追加。(--typescriptでも可)
プロジェクト名を聞かれるので、好きな名前を設定。
npx create-next-app@latest --ts
# or
yarn create next-app --ts
その後、下記でデフォルトページ表示可能。
デフォルトでは http://localhost:3000
でアクセス可能。
cd プロジェクト名
yarn dev
CSSの選択肢
大きく下記があるらしい
- Pure CSS
- CSS Modules
- CSS-in-js
Pure CSS
設定不要
.button {
background-color: green;
}
import { VFC } from 'react';
import './Button.css';
type ButtonProps = {
title: string;
};
export const Button: VFC<ButtonProps> = ({title}) => {
return <button className="button">{title}</button>
};
ただ、componentsでimportしようとすると怒られる。
./src/components/partials/Button.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: src/components/partials/Button.tsx
_app.*tsxでimportするといける。
つまりグローバル管理になってしまうため、コンポーネントベースという思想とは合わなそう。
あとはtsxファイル内に書いてしまうか。
こちらの方がまだマシ。
だだしこれも推奨されないとのこと。
import { VFC } from 'react';
type ButtonProps = {
title: string;
};
const style = {
backgroundColor: "green",
}
export const Button: VFC<ButtonProps> = ({title}) => {
return <button style={style}>{title}</button>
};
つまりReactのプロジェクトで各ページのスタイリングに素のCSSを使うことはほとんどないと思われる。たぶん。(グローバルに当てたいスタイルは上記で記述する。reset cssとか。)
CSS Modules
Next.jsのビルドインサポート。
.button {
background-color: green;
}
import { VFC } from 'react';
import style from './Button.module.css';
type ButtonProps = {
title: string;
};
export const Button: VFC<ButtonProps> = ({title}) => {
return <button className={style.button}>{title}</button>
};
古い技術で、css-loaderでdeprecatedになりそうらしい。
ただ今の所Next.jsビルドインサポートしているし、問題はなさそう。
CSS-in-JS
いくつか種類があり、styled-components, emotionあたりが有名。
試しにstyled-componentsを使ってみる。
yarn add styled-components
yarn add --dev @types/styled-components
書き方
import { VFC } from 'react';
import styled from "styled-components"
type ButtonProps = {
title: string;
};
export const Button: VFC<ButtonProps> = ({title}) => {
const Button = styled.button`
background-color: green;
`
return <Button>{title}</Button>
};
CSS modulesとの違い
- tsxファイルとcssファイルを一つにまとめられる
- テンプレートリテラルでの指定のため、動的に変更できる
CSS-in-JS良さそうと思うが、CSS ModulesがNext.jsのビルドインサポートなのはいろいろ理由があるらしい。
ページの追加
ルーティング
Next.jsでは、pagesフォルダ配下のディレクトリ構造がそのままページURLになる。
-
pages/index.js
->https://{あなたのドメイン}/
-
pages/posts/first-post.js
->https://{あなたのドメイン}/posts/first-post
-
pages/posts/[pageId].js
->https://{あなたのドメイン}/posts/{ページID}
- これは動的なルーティングのケースでページIDによって出し分けるような場合に使う
- 例えば、
https://{あなたのドメイン}/posts/a123
の場合、下記 pageId が a123 になる
import { useRouter } from 'next/router';
const Posts = () => {
const router = useRouter();
const { pageId } = router.query;
return <p>Post: {pageId}</p>;
};
export default Post;
リンク
Next.jsではaタグの利用は非推奨で、Linkコンポーネントを使う。
Linkコンポーネントを使えば、クライアントサイドで遷移ができる。
aタグを使うと、毎回フロントサーバにリクエストを投げることになる。
※ただし外部リンクの場合はaタグを使用する
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}
動的なルーティングのケース
import Link from 'next/link'
function Posts({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/blog/${encodeURIComponent(post.slug)}`}>
<a>{post.title}</a>
</Link>
</li>
))}
</ul>
)
}
export default Posts
Linkコンポーネントの詳細はこちら
code splitting
Next.jsではあるページにアクセスした場合、そのページに必要なコードのみがロードされる。
それによってページの独立性が保たれ、速度も上がる。
ただし、そのページ上にLinkタグがある場合、その先のページのロードをバックグラウンドで行う。
そのため、ページ遷移自体はクライアント側で実施され、高速な遷移を実現できるらしい。(プロダクションビルド時のみ)
Assets
画像など
画像などは public
フォルダ内に配置し、下記の様に使用
<img src="/images/profile.jpg" alt="Your Name" />
publicフォルダは robots.txt
、 favicon.ico
などの配置にも適している。素のHTMLなんかをおいても大丈夫。詳細はこちら。
Imageコンポーネント
Next.jsには画像関連をいろいろと最適化してくれるImageコンポーネントがある。
- スクリーンサイズごとの最適化
- WebPなどの最新フォーマットのサポート
などなど
詳細はこちら。
import Image from 'next/image'
const YourComponent = () => (
<Image
src="/images/profile.jpg" // Route of the image file
height={144} // Desired size with correct aspect ratio
width={144} // Desired size with correct aspect ratio
alt="Your Name"
/>
)
参考
- 公式
- 公式の学習用ドキュメントがわかりやすい
Author And Source
この問題について(Next.js入門), 我々は、より多くの情報をここで見つけました https://zenn.dev/soma3134/articles/20220406_next著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol