Next.js
Next.js で作成した API が別ドメインからアクセスされる時、CORS の問題が発生すると思います。 対応策について調べてみたところ、設定ファイルである next.config.js の header 項目が利用できる、との情報を見つけました。 nextjs-ja-translation-docs.ve…
概要 ネイティブアプリを開発する際に一部のページをウェブで表示する、という要件はあると思います。（いわゆるウェブビュー） その際に、ウェブビューを React.js と Next.js で作成する方法です。 ※ちなみに筆者はネイティブアプリ開発の経験はありません…
問題 Next.js でビルドする時に、エラーが発生した。 $ npm run build > project-name@1.0.0 build > next build info - Loaded env from /Users/me/project-name/.env.local info - Linting and checking validity of types SyntaxError: Unexpected token …
概要 Next.js v13 がリリースされました。 nextjs.org 主な変更点の1つが @next/font の追加。@next/font には以下のような特徴があります。 Automatically optimizes your fonts, including custom fonts（カスタムフォントを含めたフォントの最適化） Remo…
React Portal を使うと、コンポーネント構造の制約を受けずに、アプリケーション内の任意の箇所に DOM を挿入することができます。 モーダルの実装などで役に立つかと思います。 ja.reactjs.org そんな React Portal ですが、Next.js の SSR/SSG を利用した…
Next.js の Next/Image を利用しているコンポーネントを storybook で表示しようとしたところ、 png 画像が表示されませんでした。（以下のような状態。 Devtools の Network タブで見ても、404 が返ってきていました。 なぜかsvg 画像は問題なく表示されて…
概要 Next.js は多言語化機能を提供している。 Advanced Features: Internationalized Routing | Next.js 例えば、 <html> タグの lang 属性は自動で書き換えてくれる。 しかし、hreflang の設定は、必要とあらば自前で実装する必要があった。 hreflang とは そも</html>…
概要 Next.js v9 で TypeScript プロジェクトを作成する方法について。 環境 このブログ記事の内容は、以下の環境をベースにしています。 OS: MacOS Mojave 10.14.6 Node.js: v10.15.0 next.js: v9.0.5 方法 Next.js アプリケーションの作成 まずは普通に Ne…
