実現したいこと
Django REST Framework + NextJSブログ構築
発生している問題
以下、エラーメッセージ
Server Error
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
This error happened while generating the page. Any console logs will be displayed in the terminal window.
ソースコード
Zennにて本を購入し、コピぺ
自分で試したこと
user@yuzanoMacBook-puro-2 next-blog-tutorial % npx create-next-app . --use-npm
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
npx create-next-app . --use-npmを実行した時の上記部分の設定が動画になく、この設定を間違えてしまったのかと色々試したが同じエラーが出てしまう
上記の設定のおすすめがありましたらご教示していただければ幸いです
補足情報
回答 11件
回答するにはログインが必要です
components/layout/navigation.js
import Link from "next/link";
export default function Navigation() {
return (
<header className="container flex flex-row items-center mx-auto px-5 py-14 max-w-screen-lg">
<Link legacyBehavior href="/">
<a className="text-4xl font-bold text-red-300">NextJS Startup</a>
</Link>
<nav className="ml-auto">
<Link legacyBehavior href="/about">
<a className="mr-5">About</a>
</Link>
</nav>
</header>
);
}
legacyBehaviorprop を追加することで表示することはできました。
これはバージョンの問題でしょうか
1
ご質問ありがとうございます。
最新のバージョンでインストールして、動画チュートリアルを実施するとエラーが発生する可能性があります。
特にNext.jsはかなり変わりましたね。
動画の通り実施する場合は下記のコードを参考にしてください
お返事ありがとうございますこの選択肢はどちらを選択すればよろしいですか？？
user@yuzanoMacBook-puro-2 next-blog-tutorial % npx create-next-app . --use-npm
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
1
最新バージョンのNext.jsはApp routerを推奨しておりますが、この動画ではApp routerがなかった時代なので、Noで設定してください。
動かない場合はチュートリアルのバージョンで再インストールしてみて下さい。
user@yuzanoMacBook-puro-2 next-blog-tutorial % npx create-next-app . --use-npm
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use src/ directory? … No
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias? … No
ありがとうございます。挑戦してみます。
ぜひ最新バージョンのNEXT JSとDjangoのアプリ作成の動画を見てみたいです
1
承知いたしました。
それまで、最新バージョンのNext.jsの動画は作っていますので、参考にしてください。
API部分をDjangoのAPIと繋げてあげると連携はできるようになります。
1
動画はJSで解説しているので、TypeScriptはNoで設定した方がいいですね。
1
ご丁寧にありがとうございます。
承知いたしました、試してみます。
最新のNEXT JSの動画で
投稿、編集、削除機能をもつ簡単なブログの様なものを作成してみたいと思った場合
フロント側をNEXT JS 、バックエンドをDjango RESTフレームワークで作成するとなったらどの動画がおすすめでしょうか？？
1
Youtubeで「Next.js Django Rest Framework」で検索すると海外Youtuberのチュートリアルが出てきますので参考にして下さい。
日本語でのチュートリアルは少ないですね
はるさんの動画をぜひ参考にしたいと思っておりましたが、なかなか無さそうですか。
ありがとうございます！探してみます。
1
私の最近の動画は、バックエンドにSupabaseやprismaを使用していました。