ページを作成する。

pagesディレクトリ以下にjsファイルを追加する。
pages/posts/first-post.js の様にすると /posts/first-post のパスでルーティングする。

下記の様にデフォルトexportする。

export default function FirstPost() {
  return <h1>First Post</h1>
}

YS 2020/12/02

Link Component

Read <Link href="/posts/first-post"><a>this page!</a></Link>
この様にリンクすると遷移する。
コード分割、プリフェッチがデフォルトで行われるらしい。

YS 2020/12/02

下記の様にインラインでスタイリングできる

<style jsx>{`
      h1 {
          background-color: #cc66cc;
      }
`}</style>

グローバルスタイル

pages/_app.js を作成して、そこから参照するとグローバルにスタイル適用される。

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

YS 2020/12/02に更新

HEAD タグでタイトル等のメタ情報を定義できる。

import Head from 'next/head'

<Head>
  <title>ページのタイトル</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

YS 2020/12/02

アセット

publicディレクトリ内にアセットを格納すると静的ファイルとしてアプリケーションのトップレベルに配置される。
例：プロジェクトのpublic/images/me.jpgに画像を格納すると、パスの/images/me.jpgで公開される。

YS 2020/12/03

TypeScriptのサポート

空の tsconfig.json をルートディレクトリに配置する。
独自のコンパイルオプションがサポートされている。
依存パッケージをインストールする。

yarn add --dev typescript @types/react @types/node

これで .tsx で実装できる。

YS 2020/12/03

getStaticPropsについて

YS 2021/01/16に更新

Tailwind cssを導入する

必要ライブラリをインストールする。
npm install tailwindcss@latest postcss@latest autoprefixer@latest

styles/globals.css の先頭に下記のディレクティブを追加する。

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

コマンド npx tailwindcss init -p を実行すると下記の様に tailwind.config.js が作られる。

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

YS 2021/01/16

VSCode によるインテリセンス導入

下記のアドオンをインストール

YS 2021/01/16

その他の便利な機能

YS 2021/01/16

Layout

components フォルダをrootに作成して、 layout.js ファイルを作成する。

export default function Layout({ children }) {
  return <div>{children}</div>
}

pageコンポーネントでimportする。

import Layout from '../../components/layout'

export default function Home() {
  return (
    <Layout>
        〜〜〜
    </Layout>
  )
}

YS 2021/01/16

絶対パス、エイリアス

tsconfig.json または jsconfig.json で下記の設定を追加する。

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"]
        }
    }
}

以下の様にインポートできる。

// components/button.js
export default function Button() {
  return <button>Click me</button>
}

// pages/index.js
import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}