Next.js Tutorial で使った path, fs, matter を Node.js のみで試してみた

why gray-matter と remark の違いが分かってなかったので matter だけ動かしてみたかった Next React ではなくてまず ES6 だけやった方がいいと言われるので Node でシンプルにやってみた Next での matter の使用 nextjs.org getStaticProps のためのサン…

2021-01-26

Next.js Tutorial -- 詳細部分の pages/posts/hoge.md からの自動生成ページを作る

[id].js を作る前回の記事でリストページは完成したので、今回は詳細ページを作る nextjs.org pages/ に posts/[id].js を作るこの [id] のところにファイル内部の getStaticPaths で渡された値が入る。 import Layout from '../../components/layout' ex…

2021-01-20

Next.js Tutorial -- header 部分の分岐 -- 三項演算子と && と ||

前提 nextjs.org これの条件分岐で苦戦したのでメモを残しておくヘッダーの大きさとリンクの有無を可変にする <header className={styles.header}> {home ? ( <> <img src="/images/profile.png" className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`} alt={name} /> <h1 className={utilStyles.heading2Xl}>{name}</h1> ) : ( <> <Link href="/"> </link></header>

2021-01-02

Next.js Tutorial -- .md files のヘッダーデータのリスト表示と CSS

starter nextjs.org ブラウザキャッシュをクリアして en/ に飛ばされる問題を解決し、空の next app を動かした Hello Next qiita.com エディタを使うので VScode をセットアップする pages/ に posts/first-post.js を作って export default function Firs…