nextjs.orgをただ読んでいくだけの投稿 その1

※ nextjs.orgをGoogle翻訳したのをただ読んで、気になった部分だけをコピペしていくだけの投稿です

Getting Started - Next.js Documentation <-のURLの以下カテゴリーを読みました

• How to use
  • Setup
  • Automatic code splitting
  • CSS
    • Built-in CSS support
    • CSS-in-JS
    • Importing CSS / Sass / Less / Stylus files

---

Setup

https://nextjs.org/docs#setup

それをインストールしてください。

npm install --save next react react-dom

このようにpackage.jsonにスクリプトを追加します。

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

自分の環境では以下のようになりました

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

それ以降は、ファイルシステムがメインのAPIです。すべての.jsファイルは自動的に処理されレンダリングされるルートになります。

Populate ./pages/index.js inside your project:

export default () => <div>Welcome to next.js!</div>

それから npm run dev を実行して http：// localhost：3000 に行きます。別のポートを使用するには、npm run dev - -p <自分のポートはこちら> を実行します。

これまでのところ、

• 自動transpilationと同梱（webpackとbabelを使って）
• ホットコードの再読み込み
• サーバーレンダリングと ./pages のインデックス作成
• 静的ファイルサービング ./static/ は / static / にマッピングされます（プロジェクト内に ./static/ ディレクトリを作成した場合）。

これがどれほど簡単かを確認するには、サンプルアプリ - nextgramをチェックしてください。

Automatic code splitting

https://nextjs.org/docs#automatic-code-splitting

Every import you declare gets bundled and served with each page. That means pages never load unnecessary code!

import cowsay from 'cowsay-browser'

export default () => (
  <pre>
    {cowsay.say({ text: 'hi there!' })}
  </pre>
)

CSS

https://nextjs.org/docs#css

Built-in CSS support

孤立したスコープ付きCSSをサポートするためにstyled-jsxをバンドルします。目的はWebコンポーネントに似た「シャドウCSS」をサポートすることです。残念ながらサーバーレンダリングはサポートしておらず、JSのみです。

export default () => (
    <div>
        Hello world
        <p>scoped!</p>
        <style jsx>{`
            p {
                color: blue;
            }
            div {
                background: red;
            }
            @media (max-width: 600px) {
                div {
                background: blue;
                }
            }
        `}</style>
        <style global jsx>{`
            body {
                background: black;
            }
        `}</style>
    </div>
)

他の例についてはstyled-jsxのドキュメントを参照してください。

CSS-in-JS

既存のCSS-in-JSソリューションを使用することは可能です。最も簡単なのはインラインスタイルです。

export default () => <p style={{ color: 'red' }}>hi there</p>

より洗練されたCSS-in-JSソリューションを使用するには、通常、サーバーサイドレンダリング用のスタイルフラッシュを実装する必要があります。これを可能にするのは、各ページをラップする独自のカスタムコンポーネントを定義できるようにすることです。

Importing CSS / Sass / Less / Stylus files

.css、.scss、.less、または.stylファイルのインポートをサポートするために、これらのモジュールを使用することができます。これらのモジュールは、サーバーでレンダリングされたアプリケーションに適切なデフォルトを設定します。