使用するバージョン
next : 11.0.1
react : 17.0.2
プロジェクトの作成
プロジェクトを作成するディレクトリで下記を実行。
npmの場合はyarnをnpxに置き換えてください。
$ yarn create next-app --typescript
プロジェクト名を聞かれるので入力してエンター。
? What is your project named? › my-app
新しいディレクトリが作られているのでカレントにしましょう。
$ cd my-app
これで準備完了
下記を実行することでローカルサーバーが起動します。
$ yarn dev
ブラウザでhttp://localhost:3000
にアクセスして「Welcome to Next.js!」が表示されることを確認してください。
ページの編集
最初に表示されたページを編集してみましょう。
pages/index.tsx
を下記のようにしてみましょう。
pages/index.tsx
- import Head from 'next/head'
- export default function Home() {
- return (
- <div>
- <Head>
- <title>ホームページタイトル</title>
- <meta name="description" content="ホームページ概要" />
- </Head>
- <h1>ホームページタイトル</h1>
- </div>
- )
- }
こんなところにって感じですが、Headで囲むことで、ページのheadタグ内の要素を追加することができます。
ブラウザを更新して内容が変わっているこをと確認してください。
ページの追加
新しくページを追加してみましょう。
先ほどのindex.tsx
と同階層にabout.tsx
というファイルを作成します。
pages/about.tsx
- import Head from 'next/head'
- export default function About() {
- return (
- <div>
- <Head>
- <title>自己紹介タイトル</title>
- <meta name="description" content="自己紹介概要" />
- </Head>
- <h1>自己紹介タイトル</h1>
- </div>
- )
- }
ブラウザでhttp://localhost:3000/about
にアクセスしてファイルの情報が表示されることを確認してください。
このようにNext.jsではpages
ディレクトリにファイルを配置するだけで表示することができます。
ページのリンク
リンクは通常のhtmlと同様にaタグを使用することができますが、Linkコンポーネントを使用することで高速で画面遷移できたりとかその他にも色々メリットがあります。
pages/index.tsx
- import Head from 'next/head'
- import Link from 'next/link'
- import styles from '../styles/Home.module.css'
- export default function Home() {
- return (
- <div className="wrap">
- <Head>
- <title>Next.js使ってみた</title>
- <meta name="description" content="Next.jsのテストです。" />
- </Head>
- <nav>
- <ul>
- <li><Link href="/">Home</Link></li>
- <li><Link href="/about">About</Link></li>
- </ul>
- </nav>
- <h1>Next.js使ってみた</h1>
- </div>
- )
- }
レイアウトコンポーネント
先ほどナビゲーションを作りましたが、こいうのはすべてのページに共通のものを入れることが多いと思います。
共通で使用できるようにレイアウト用のコンポーネントを作ってみましょう。
components/layout.tsx
- import Head from 'next/head'
- import Link from 'next/link'
- type Props = {
- children?: React.ReactNode
- title?: string
- description?: string
- }
- export default function Layout({ children, title, description }: Props) {
- const pageTitle = title || 'ホームページタイトル'
- return (
- <div className="wrap">
- <Head>
- <title>{ pageTitle }</title>
- <meta name="description" content={ description || 'ホームページ概要' } />
- </Head>
- <header>
- <h1>{ pageTitle }</h1>
- </header>
- <nav>
- <ul>
- <li><Link href="/">Home</Link></li>
- <li><Link href="/about">About</Link></li>
- </ul>
- </nav>
- <main>{ children }</main>
- <footer>© Next.js Demo</footer>
- </div>
- )
- }
このレイアウトコンポーネントをindex.tsxで使用します。
components/layout.tsx
- import Link from 'next/link'
- import Layout from '../components/layout'
- import styles from '../styles/Home.module.css'
- export default function Home() {
- return (
- <Layout
- title="ホームページタイトル"
- description="ホームページ概要"
- >
- <p>ホームページコンテンツ</p>
- </Layout>
- )
- }
スタイルについて
スタイルは最初からstyles
ディレクトリにCSSファイルが入っています。
styles/globals.css
は自動的に読み込まれるのですべてのページに反映したいスタイルなどに使用します。
ページ専用のスタイルを使用したい場合はstyles/Home.module.css
のようなファイルを作成します。
例えば文字を赤くするスタイルを作ったとすると。
styles/Home.module.css
- .colorRed {
- color: red;
- }
インポートして使用することでファイル間のクラス名のバッティングを回避することができます。
pages/index.tsx
- import styles from '../styles/Home.module.css'
- // ...
- <p className={styles.colorRed}>ホームページコンテンツ</p>
静的HTMLに書き出す
ざっと使い方がわかったので最後にビルドしてみましょう。
最終的にどのような運用をするかによって変わってくると思いますが、今回は静的なHTMLに書き出してみます。
package.json
のbuild
部分を次のように書き換えます。
package.json
- "scripts": {
- // ...
- "build": "next build && next export",
- },
次に下記コマンドを実行
$ yarn build
out
というディレクトリが作成され、その中にHTMLファイルとかが入っています。
out
というディレクトリ名を変更することもできます。
next export
に-o
オプションを追加しましょう。
package.json
- "scripts": {
- // ...
- "build": "next build && next export -o dist",
- },