hoshicode

about

Next.js(~12v)に関するメモ

2022-07-17に公開

目次

このページはNext.jsに関するメモ(基本的なこと)のページ。
随時更新予定

・アプリケーション作成

npx create-next-app <アプリ名> --typescript


・pages/api/hello.tsの型

// NextApiRequestとNextApiResponseを追加
import { NextApiRequest, NextApiResponse } from "next"; 

export default function handler(req: NextApiRequest, res: NextApiResponse) { 
   res.status(200).json({ name: 'John Doe' }) 
}


pages/_app.tsxの型

import '../styles/globals.css';
// AppPropsを追加
 import type { AppProps } from 'next/app'; i
mport Layout from '../components/Layout';

// 全てのページで読み込ませたいコンポーネントも追記(Layout)
function MyApp({ Component, pageProps }: AppProps) { 
　　return ( 
　　　　<> 
　　　　　　<Layout> 
　　　　　　　　<Component {...pageProps} /> 
　　　　　　</Layout> 
　　　　</> 
　　　); 
}
export default MyApp;


・faviconの設定

public/static配下にfaviconを用意

// pages配下に_document.tsxを作成
import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  rendet() {
     return (
         <html>
               <Head>
                   // faviconをここに記述
                   <link rel="icon" type="image/png" sizes="32x32" href="static/favicon/hoshico32.png" />
                   <link rel="icon" type="image/png" sizes="16x16" href="static/favicon/hoshico16.png" />
               </Head>
               <body>
                   <Main />
                   <NextScript />
               </body>
         </html>
     )
  }
}


・next/imageで外部のURLを使用するとき

next.config.jsで外部ドメインを設定しておく必要がある

// images.microcms-assets.ioが外部ドメイン

module.exports = {
  images: {
    domains: ['images.microcms-assets.io'],
  },
};