プロジェクト作成
{ "scripts": { "dev": "next", "build": "next build", "start": "next start", "export": "next export" } }
- インストールする
npm install --save next
- next.config.jsを作成し下記を記述する
exportPathMapで出力するページのマッピングを行う (pagesのindex.jsをトップページに設定)
module.exports = { exportPathMap: function () { return { '/': { page: '/'} } } }
- さらにpagesというディレクトリを作成し、その中にindex.jsとother.jsを作成する
index.js
import Link from "next/link"; export default () => ( <div> <h1>Welcome to index</h1> <p>Hello index</p> <Link href="/other"> <button>go to Other</button> </Link> </div> );
other.js
import Link from "next/link"; export default () => ( <div> <h1>Other</h1> <p>Hello Other</p> <Link href="/"> <button>go to index</button> </Link> </div> );
- プロジェクトの実行
npm run dev
- ビルド
npm run build
- エクスポート
npm run export
コンポーネントを利用する
Next.jsでコンポーネントを利用する際は、下記のようにインポートすることで利用できます。
※componentsフォルダにhoge.jsを作成
index.js
import Link from "next/link"; import Hoge from '../components/hoge' export default () => ( <div> <h1>Welcome to index</h1> <p>Hello index</p> <Hoge /> <Link href="/other"> <button>go to Other</button> </Link> </div> );