こんにちは。
今回はnext.js 13以降を使って個人開発してみようということで、
シリーズで初心者でも開発環境が整えられるような記事にしていこうと思います！
next.js 13からは「App Router」が導入されて、
ディレクトリ構造も大きく異なりました。
next.jsはSSRなどでトレンドとなっており、
開発するなら、next.jsを使ってみたいという方も多いと思いますが、
まだなかなか日本語版の解説が少ないのが現状でしたので、
英語版DocとchatGPTを使って進めていけたらと思います。
今回は#1としてプロジェクトの立ち上げから、
saasでのフロントエンド開発ができるまで
をやります。
プロジェクトの立ち上げ
まず、next.js 13でプロジェクトを立ち上げます。
以下のコマンドをターミナルに打ち込みましょう。
PS C:\> npx create-next-app@latest以下のような事が聞かれますが、
僕は以下のように進みました。
今回はTailwindは使わないのでnoにしておいてください。
ここは他のサイトでも解説されているのでスルーします。
そうしたら、
reactより速く、
プロジェクトが立ち上がって
ディレクトリが見れるようになります。
「about」フォルダは僕が勝手に付けましたがこんな感じですね。
それ以外のディレクトリ構造は同じはずです。
では、ついでに、saasの方もインストールしてしまいましょう。
saasのインストール
saasとは、
cssを入れ子構造で書けるようにしたものですが、
以下にsaasとは何かを解説しているサイトを載せておきます。
まず、ターミナルで以下を実行します。
PS C:\> npm install --save-dev sassその後は
rootにあるnext.config.jsに以下のように追加します。
/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
module.exports = nextConfig注：24/03/16時点でLinax環境でやろうとしたら
requireがないだの__dirnameがないだのおこられたので下記を変わりに使った。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
/** @type {import('next').NextConfig} */
import path from 'path';
// 現在のディレクトリ名を取得
const __dirname = path.dirname(new URL(import.meta.url).pathname);
const nextConfig = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
};
export default nextConfig;最後にファイル名を.css → .scssに変え、
layout.tsxや、page.tsxのimportのpassもscssに変えておきます。
これで、import時にこのpassにあるファイルを参照できるようになります。
参考に公式Docを載せておきます。
これでsaasを使えるようにしておきました。
意外とここはスムーズに行けました。
次は先ほど僕が追加した、
「about」フォルダが何者なのかを紹介します。
pageディレクトリについて
ここは他でも解説されているので、
簡単に通り過ぎますが、
上記で作った「about」ディレクトリはページディレクトリ
というものです。
ページディレクトリ名がそのままurlになるもので、
例えば、
ターミナルで
PS C:\> npx run devで実行してローカルホストをブラウザ上で開くと、
http://localhost:3000でnext.jsのロゴが見えると思います。
さらにこのurlの最後に先ほど付けたディレクトリ名「about」
を追加してみて見ます。
http://localhost:3000/aboutでは、
先ほどのnext.jsのロゴページではなく、
aboutディレクトリ下にあるpage.tsxの内容が反映されるようになります。
ちなみにhttp://localhost:3000
で表示されるのはappディレクトリ直下のpage.tsxです。
ということで、
page.tsxを編集していくことがベースと分かりました。
次は「components」を使うために
componentsディレクトリを設定します。
componentsディレクトリの場所は？
基本、reactはcomponentsを組み合わせてページを作ります。
例えば、1ページ作るにも、
header, body, footer
などの様々なcomponentを組み合わせて、
1ページを作ります。
そのためにcomponentsディレクトリを
src直下に作ります。
(名前はなんでもいいのですが)
他にもちょっとファイル名とか変更してありますが、
後で説明するので、
componentsの位置を確認してください。
appと同レベルですね。
あとはreactの時と同様、
componentsで定義したcomponent達を、
app/page.tsxや、
app/about/page.tsxなどに適応することが出来ます。
以下はapp/page.tsxでcomponentを使った例です。
上記の<Sample />でcomponentを使用しています。
ここはreactの主な機能なので
割愛させてください。
module.scssについて
ここからはscssの適応についてみていきます。
もう一度ディレクトリをみてください。
appディレクトリ下に
global.scssとpage.module.scssがあります。
簡単に役割は、
global.css →cssのrootのように全体に適応されるcss
page.module.css → 読み込んだファイルでのみ適応されるcss
です。
module.cssがよくわからない方は
以下の動画がとても参考になると思います。
僕は助けられました。
componentとかも解説動画があったので、
見てみるとイメージ湧きやすいのかなぁと思います
ということで、
app/global.cssもapp/page.module.cssも
これから自分で記述していくので、
削除してみます。
(注：tailwind cssを導入している場合は上から3行目あたりまでの@～を消さないみたいです)
どちらもこうなったらcssを記述していけるので、
試しにpage.module.cssで記述してみましょうか。
こんな感じでしょうか。
あとはこのtestクラスをapp/page.tsxのdevタグに適応します。
./page.module.scssをstylesとしてimport
しているので、
このpage.tsxにはpage.module.scssが適応されます。
僕はhello next。
Sampleコンポーネントの記述も加わって、
app/page.tsは
以下のような表示になりました。
これで、
app/page.tsxはscssも使いながら
フロントエンド開発が出来そうですね。
最後に、
pageディレクトリでも同じことが出来ることについて
少し触れて、
そっちのフロント開発もできるようになってから
終わろうと思います！
pageディレクトリとmodule.scss
ここでaboutディレクトリを見てみましょう。
[page].module.scssの[page]部分は変更可能なので、
about.module.scssのようなファイルを、
app/about/page.tsxに適応させることも可能です。
その場合は、import時のpassを指定場所にしてください。
以下は
app/about/page.tsxの記述例です。
そうすると、
http://localhost:3000/about
ではこうなりましたね。
about.module.scssのフォントサイズ20remが効きすぎましたねｗｗ
というわけでフロント開発がnext.js 13でも始められそうです。
個人開発の方やこれからnext.js 13を勉強し始める人の
お役に立てたら嬉しいです。
コメント