This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

• styled-components と emotion で出来ることは大体同じ
• パフォーマンスの観点では styled-components < emotion
• SSR考慮の観点では styled-components < emotion
• ドキュメント量の観点では styled-components > emotion
• emotion は source map をサポートしている。styled-components は未だ(20-06-28) source map に未対応
• emotion/core では jsx pragma コメントが必要。
• css prop 記法ではなく styled component 記法であれば emotion/styled のみを使用すれば良い
• emotion/styled では jsx pragma コメントは必要ない

reference:

• Gatsby + netlify から next.js + zeit/nowに乗り換えようと試みて(未遂)得られた知見
• CSS-in-JSのライブラリとして「emotion」を選択している理由
• styled-components-vs-emotion
• styled-component support source map progress

yarn add --dev babel-plugin-emotion

{
    "presets": ["next/babel"],
    "plugins": ["emotion"]
}

reference:

• emotion official | install
• nextjs official | Customizing Babel Config

reference:

• material-ui official | inject First
• material-ui official | server-rendering
• github | next ssr sample
• qiita | Material-UI と styled-components を組み合わせ...

• qiita | TypeScript で書く React コンポーネントを基礎から理解する

nextjs は ts-loader 等は使用されず、@babel/preset-typescript を使用して ts → js へトランスパイルしている。型チェックには fork-ts-checker-webpack-plugin が以前使用されていたが、build 速度の改善から現在は Typescript API を直接使用して型チェックが行われている。なお型チェックは build 時のみに行われる。

@babel/preset-typescript の挙動にはいくつか気をつけるべき点がある。 またこれは、transpileModule API（--isolatedModules も同様）を使用した際も同様である。

• const enum は使用できない。
• Re-exports では export される内容が型情報なのか実装なのか babel or transpileModule API は知る由もない為、その export される変数がトランスパイル後保持されてしまう。結果 re-export する変数が型情報だった場合に、export 元の型情報は削除されている為、参照エラーになる。
• export 元の処理で実装に関わる処理が行われていても export した先で型情報だけが使用された場合に、export 元のファイルは型のみを扱うものとして認知され削除されてしまう。結果、export 元での実装に関わる処理も実行されない。

reference:

• Replace 'fork-ts-checker-webpack-plugin' with faster alternative
• qiita | Re-exports 問題
• qiita | const enum は使用できない
• ms | Type-Only Imports and Export