When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
NEXTJSでアニメーションのある簡単なホームページを作ります（2023年バージョン13）
HTML、CSSをやり終えた初学者でも作れます！framer-motion、tailwindcssを使って学習しましょう
This Course Includes
udemy
4.2 (15 reviews )
4 total hours 
japanese
Online - Self Paced
course
Udemy
About NEXTJSでアニメーションのある簡単なホームページを作ります（2023年バージョン13）
Next Jsを使ってアニメーションのある簡単なホームページを作成します。
HTML、CSSを勉強した後の初学者向けに作りました。
おそらくJavaScriptやrailsを学習しようか、、、という段階ではないでしょうか？
ただ、まだ現段階ではデータベースを使うと情報量も覚える事も多いと思います。
ですので、JavaScriptを学習しながら、npmコマンドでサーバーを起動したり、GitHubを使ってコードを管理できるようにしたり、vsコードの拡張子をインストールしたりと、開発に必須なツールを総合的に使うようなコースにしています。
バックエンドを使う処理であればどの言語でも良いのですが、
reactをベースに組み立てられているNEXTJSがおすすめだと考えています。
情報も多いですし、応用も効きますし、基本的なアプリは全て作ることができます。
そんな方に向けたコースとなっております！
今回、NEXTJSはバージョン13を使っています。
appを使ったルート設計でページの管理をするのですが、とても簡単です！
今回はフロントの見た目に特化していて、データベースやapi等のバックエンドの処理はしていません。
しかし、フロントエンドはアニメーションを入れたり、CSSもレスポンシブデザインにしたりと、総合力が必要となります。
まずは開発に慣れるところから初めてみましょう。
使用パッケージは
nextjs13、tailwindcss、framer-motion、react-icons、GitHub、vercel、JavaScript
What You Will Learn?
- NEXTJS13を使った開発方法が学べます.
- appディレクトリの使い方が学べる.
- NEXTJSを使って簡単なホームページを作れる.
- 作ったアプリを一般公開する方法が学べる.
- framer motionの使い方が学べる.
- tailwindcssの使い方が学べる.
- GitHubにコードを保存してvercelを使った公開の仕方が学べる.
- react-iconの使い方が学べる.
- vsコードの便利な拡張機能がわかり開発が楽になる.
- 実用的なホームページが作れる.
- ページにアニメーションをつける方法を学べる.