Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@gasshiy(富樫 葉子)

Next.js学習の記録

Posted at

Next.jsはReactのフレームワークである。
Reactはかなり扱いづらい印象なので、Next.jsを使用すると簡単に書けるらしい。
##Next.js使った感想
構成はWordpressのそれに近いが、もっとかなり効率的に作られている。
全てのHTMLは.jsファイルから生成される。.htmlを使うことはない。
CSS自体はそのままだが、グローバルとそうじゃない奴の区別が必要。
.mdファイルによるブログの生成はすごい。何がすごいって、ただのテキストファイルをブログ形式で読み込んでくれるところだ。
でも、ブログツールって大量にあるから別にこれを使わんでもいい。ただ、スクラッチから何か作らないといけない時、このJSだととても楽に感じるかもしれない。
問題は.mdのマークダウン記述方法を書く本人が理解してないといけなくて、それだと、一般ピーポーはGUIだったりWYSIWYGエディタの方が、やっぱりやりやすい。
やはりエンジニア向けのやりかたなのかも〜。

##使い方

Node.jsをインストールする。
テキストエディタとターミナルを使用する。
チュートリアルはMacの方が有利。

###チュートリアル

以下のコマンドが使用可能

npm run dev
Starts the development server.

npm run build
Builds the app for production.

npm start
Runs the built app in production mode.

We suggest that you begin by typing:

cd nextjs-blog
npm run dev

http://localhost:3000/
で現在作っているものを見れるらしい。

pages/index.jsで修正し上書きすると、即座に上記URLに反映される。リロードする必要はない。

Next.jsに置いてページというのは、Reactのコンポーネントである。

pages/index.jsがルートであり、このpages配下にページを作っていくよ。

作る時は手動でディレクトリやページを作ってOK。ファイルはindex.jsと同じで、.jsで管理。
チュートリアル通りにやっていれば、次はhttp://localhost:3000/posts/first-postを開くと作ったページが見える。

###リンクはコンポーネントである
リンク使う時はコンポーネントからインポートする
import Link from 'next/link'

コードスプリッティング
つまり、ページ遷移時にフルリロードしないということ。効率が良いとの説明。あと軽い。

###静的コンテンツ（画像など）の扱い

ルートpublicのディレクトリに存在する。
robots.txtもここ。

メタデータは

コンポーネントに入っている。

CSSは
styled-jsxというライブラリを使っている。
（styled-components や emotionも使用可能）
.css .scssもインポート可能

###コンポーネント

componentsルートディレクトリにlayout.jsを作る。

layout.module.cssも作って入れる。

CSSモジュールを使用したい場合、全てのCSSファイル名は.module.cssで終わらなければならない。

主な書き方：

layout.jsに以下を書き込む
ページではimport Layout from '../../components/layout'で読み込む

import styles from './layout.module.css' export default function Layout({ children }) { return <div className={styles.container}>{children}</div> }

CSS モジュールを使うと、class名が自動で付与される。

###グローバルCSS（全ページ共通）

pages/配下に_app.jsを作成して読み込む。

_app.jsを追加した際はサーバの再起動が必要。
ターミナルにてCtrl+cを押したのち、　npm run dev
実際のCSSは../styles/global.cssに書く
これを_app.jsで読み込む

###Next.jsの条件分岐の書き方
{!home && ( <div className={styles.backToHome}> <Link href="/"> <a>← Back to home</a> </Link> </div> )}

###classnamesライブラリを使用して、class名をトグル化する

npm install classnames

ちょっとよくわかってないけどエラー表示等に対してサクッとclass名つけてくれるっぽい。

###Sassはインストールしないと使えないよ〜。

npm install sass

##プリレンダリング
Next.jsでもっとも重要なことの一つらしい。
React.jsの場合、プリレンダリングが行われないため、Javascriptをキルした状態だとなにも画面にレンダリングされないが、next.jsでは可能。
レンダリングには２種類ある。

###Static Generation　静的生成
極力こちらを使うことが推奨されている。
こちらのレンダリングは、ユーザーがリクエストする前に生成することが可能である全てのページに置いて使用可能。
###Server-side Rendering　サーバーサイドレンダリング
つど生成する
ビルド時ではなく、リクエスト時にレンダリングしたい時に使う。

Staticであろうがサーバーサイドであろうが、プリレンダリングの方法はNext.jsでは各ページにて選択することができる。
プリレンダリングをスキップすることも可能。

###Staticでデータを取得する　getStaticProps
rootにpostsディレクトリを作成
getStaticPropsを実装していきます
gray-matterにメタデータを構文解析させる　https://github.com/jonschlinkert/gray-matter
（グレーマターという名前が怖すぎるw）
グレーマターをインストール
ルートにlibディレクトリを作成
posts.jsを作成、ここでグレーマターをインポートする。getSortedPostsDataはデータベースからデータをとってくる。（データは.mdファイル内）
index.js（表示がわ）でimport { getSortedPostsData } from '../lib/posts'でデータ読み込み、
export async function getStaticProps() {・・・でデータを呼び出し
HomeコンポーネントallPostsDataを渡し
HTMLで表示させる。

####.mdファイルとは
Markdownとは、文書の構造や修飾情報を記述するマークアップ言語の一つ。ソフトウェアの関連ドキュメントの作成などによく利用されている。ファイルとして保存する際の標準の拡張子は「.md」。

####getSortedPostsDataとは
他のAPIからデータフェッチすることも可能
getStaticPropsは、pagesにしか出力できない

###サーバーサイドレンダリングの方法　getServerSideProps
export async function getServerSideProps(context) { return { props: { // props for your component } } }
###Client-side Rendering　クライアントサイドレンダリング
部分的に静的レンダリングを行い、必要に応じた部分のみデータをとってくる。
ex.ユーザー用のダッシュボードなど。SEOが関係ないため。
SSR（サーバサイドレンダリング）にすると、SEOに効果的、らしいよ。

####SWR （stale-while-revalidate）
Reactのリモートデータフェッチングライブラリ
キャッシュ
リバリデーション
フォーカストラッキング
定期的フェッチング

###page path
ダイナミックにページのパスを生成する
/posts/というパスにしたくて、id部分は.mdのファイル名にしたい。
[id].js を pages/posts配下に作成。[]で括られるファイルはNext.jsに置いて動的生成である。
getStaticPathsをエクスポートする
getStaticPropsを再度使用
export async function getStaticProps({ params })
このparamsの中にidが入る

posts.jsにgetPostData(id)をエクスポート

###マークダウンコンテンツをレンダリングする（ブログの文章、内容を）
リマークライブラリのインストール
npm install remark remark-html
lib/posts.jsでインポート、ソースをいじる
pages/posts/[id].js　のソースを修正

####タイトルタグを足す

<Head>
<title>{postData.title}</title>
</Head>

###ダイナミックリンクの張り方

import Link from 'next/link'
でコンポーネントをインポート

####全てのパスを取得
ピリオド３つ入れると、そこが可変になる。
pages/posts/[...id].js matches /posts/a, but also /posts/a/b, /posts/a/b/c and so on.

###404

pages/404.js

###API routes
pages/api内にjsファイルを作成する。

// req = request data, res = response data
export default (req, res) => {
  // ...
}

##デプロイ

Vercelにデプロイします。
GitHubアカウントを準備。
Githubに今まで作ったファイルを全部アップする。（私はソースツリーを使いました）
Vercelアカウントを作成。
GitHubのアドレスを入力。
自分が作ったリポジトリをインポートする。
デプロイが始まり、1分ほどで.appが作成される。

###余談
appで変更をしたい場合。
ブランチをきり、変更をして、githubにpushし、プルリクを作成すると
Vercelが自動探知してくれて、previewURLが発行される。
プレビューがOKだった場合、ブランチをmasterにマージする。
DPS: Develop, Preview, and Ship

###Node.jsをサポートするホスティングプロバイダーにならデプロイできる

##Next.jsまとめ

サーバでないと使えないが高速で動的にページを生成できる
Wordpressのようなことができる

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?