Ubuntu19.10 Next.jsを使ってHello Worldしてみる
- 2019.12.23
- Next.js ubuntu
- Next.js, ubuntu19.10

React上のフレームワークであるNext.jsの環境を構築してHello Worldしてみる
環境
- OS ubuntu19.10
- node v12.13.0
- npm 6.12.1
※ubuntu19.10にnodeのインストールはこちら
Next.js環境構築
任意のディレクトリで下記のコマンドを実行して、インストールします。
1 2 |
## ローカルインストール npm i -D create-next-app |
プロジェクト作成
下記のコマンドを実行してプロジェクトを作成します。今回はtest-proという名前で作成します
1 2 |
## プロジェクト作成 sudo npx create-next-app -example api-routes-micro test-pro |
起動
とりあえず、起動してみる
1 2 3 4 5 |
## プロジェクトに移動 cd test-pro ## 起動 sudo yarn dev |
ブラウザよりhttp://localhost:3000にアクセスしてみると下図が表示されます。

Hello Worldしてみる
test-pro/pages/api内のposts.jsを下記のように編集します
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import micro from 'micro' const posts = [ { title: 'Hello', }, { title: 'World', }, ] export default micro((req, res) => { res.status(200).json(posts) }) |
htmlだけですが、test-pro/pages内のindex.jsも少しだけ編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import fetch from 'isomorphic-unfetch' const Index = ({ posts }) => ( <div> {posts.map((post, i) => ( <p key={i}>{post.title}</p> ))} </div> ) Index.getInitialProps = async () => { const response = await fetch('http://localhost:3000/api/posts') const posts = await response.json() return { posts } } export default Index |
ラウザよりhttp://localhost:3000にアクセスしてみると下図が表示されます

-
前の記事
Vue.js axios(アクシオス)を使用してWebApiからデータを取得するサンプルコード 2019.12.22
-
次の記事
Ubuntu19.10 nmapをインストールして、LAN内で利用されているIPアドレスを調査する 2019.12.23
コメントを書く