Next.jsの混乱を解く

Next.jsとは

サーバー側で色々すること

利点

・ルート管理とかを自動でやってくれる
・SEOとかに有利
・面倒な設定がいらない

欠点

・Vercelなどのサーバー建てサービスが必要(当たり前...)

導入

Package.jsonでコンパイラに指定できるらしい。

package.json

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

自動ルート管理について

1. filename.tsxを作る
   この際filenameを[]で囲むことによりparamで設定可能

2. import { GetServerSideProps, NextPage } from "next";をファイル冒頭に入れて、後にexportする関数達がframework監督範疇内であることを伝える

3. importしたframeworkに従った固定名の関数を作る。そして型を明示してエラーを防ぐ。この場合だとconst IndexPage: NextPage<TypeName> = ({input}) =>とconst getServerSideProps: GetServerSideProps<TypeName> = async () => である

4. どちらもexport defaultしてあげれば終わり。Next.jsが自動で判断できるようになる。

補足

TypeNameが共通であるのは、IndexPage関数の引数として設定してあるものを自動呼び出しされる際に互換性を持たせるためである。

まとめ

混乱してるのは筆者というオチです。
ここまでお疲れ様でし