Next.js latest starter

Next.js v13 + CSS Modules 環境で Linter や Formatter の構築が完了しているスターターリポジトリです。

Dependencies

package	version
next	13.2.1
react	18.2.0
ress	5.0.2
typescript	4.9.5
Node.js	18.14.0

Usage

下記のコマンドを用いることで、このリポジトリの内容で環境を作成することができます。

yarn create next-app -e https://github.com/tsuki-lab/nextjs-latest-starter

Next.js v12

yarn create next-app -e https://github.com/tsuki-lab/nextjs-latest-starter/tree/nextjs-12

Next.js Pages https://nextjs.org/docs/basic-features/pages

yarn create next-app -e https://github.com/tsuki-lab/nextjs-latest-starter/tree/nextjs-pages

Building environment

1. nodenv のインストール

※ nodenvが既にインストールされている場合や、他のバージョン管理ツールを既に利用している場合は読み飛ばしてください。

Homebrewをインストールしていない場合は、先に Homebrew をインストールしてください。

まず、nodenv をインストールします。

brew install nodenv

利用しているシェルに応じて、次の 1 行を書き込みます。

bashを利用している場合

# ~/.bashrc
eval "$(nodenv init -)"

zshを利用している場合

# ~/.zshrc
eval "$(nodenv init -)"

ここまで設定できればターミナルを閉じて、再度開きます。

nodenvの設定が完了しているかどうかを確認します。以下のような結果になれば OK です。

curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
# Checking for `nodenv' in PATH: /usr/local/bin/nodenv
# Checking for nodenv shims in PATH: OK
# Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 4.9.43)
# Counting installed Node versions: 1 versions
# Auditing installed plugins: OK

2. Node.js のインストール

Node.jsのインストールには、先程インストールしたnodenvを利用します。

nodenv install

このコマンドの実行が完了したら、下記のコマンドを実行してください。

node --version

適切にバージョンが表示されれば Node.jsのインストールは完了です。

3. yarn のインストール

※ yarnが既にインストールされている場合は読み飛ばしてください。

パッケージをインストールするためにyarnをインストールします。

brew install yarn

このコマンドの実行が完了したら、下記のコマンドを実行してください。

yarn -v
# 1.22.17

which yarn
# /opt/homebrew/bin/yarn

適切に表示されればyarnのインストールは完了です。

4. package のインストール

起動に必要な環境依存情報をインストールします。

yarn install

このコマンドの実行が完了して、node_modulesというフォルダが作成されたら完了です。

5. 開発環境立ち上げ

ローカルサーバーを起動します。

yarn dev

localhost:3000が立ち上がれば完了です。

Styles

Reset CSS

Installed ress.

Global

Setting to globalStyle from global.css.

html {
  --color-primary: #3a4452;
  --color-secondary: #bfcbdc;
  --color-base: #f6f7f8;
  --color-accent: #d35692;
  --color-white: #fdfdfd;
  --color-black: #1f1f1f;
}

body {
  background-color: var(--color-white);
  color: var(--color-black);
}

a {
  color: var(--color-secondary);

  &:hover,
  &:focus,
  &:active {
    color: var(--color-accent);
    text-decoration: underline;
  }
}

Media Query

Setting to media-query.scss.

Usage.

@use 'media-query';

@include media-query.sp {
  // ...
}

License

MIT

hashibadaiki / nextjs-latest-starter Goto Github PK