🐡
Astroチュートリアルメモ その2-1,2【新規ページを作る】
チュートリアルのその2。0から2まで。
新規で.astroという拡張子のファイルを作成し、新しいページを作る。
チュートリアルでやっていることは簡単なので、ルーティング周りについてメモっておく。
チュートリアルでは指定のフォルダにファイルを作って内容をコピペするだけだが、開発サーバーで動作を確認することで、ルーティングの基礎の基礎がわかるようになっている。
ルーティング
pagesの配下にindex.astroを作ると、そこがトップページになる。
pagesの配下にabout.astroを作ると、ドメイン/about/ページになる。
pagesの配下にabout/index.astro を作るとドメイン/about/ページになる。
pagesの配下にマークダウンファイルを作ると、自動で変換してくれる。例えばposts/post-1.mdはドメイン/posts/post-1/でアクセスできる。
Next.jsのルーティングにマークダウンファイル対応が加わった感じ。Next.jsのチュートリアルに載っているマークダウンの変換部分を裏でやってくれるのは楽。remarkとかを使っているみたい。この変換プラグインは設定で変更したり色々カスタマイズできるらしい。
動的ルーティング
動的なルーティングも可能。これもNext.jsと同じ。
ルーティングに関してはチュートリアルではなく以下のドキュメントを読んだ方がよい。
getStaticPathsでURLになる値をパラメータで渡すところなどもNext.jsと同じ。
その際に一緒にデータも渡せるのがNext.jsと違うところ。AstroのgetStaticPathsはNext.jsのgetStaticPropsとgetStaticPathsの機能をあわせ持っている感じ。
次の記事
Discussion