NEXTJSでアニメーションのある簡単なホームページを作ります（2023年バージョン13）
HTML、CSSをやり終えた初学者でも作れます！framer-motion、tailwindcssを使って学習しましょう
Ratings 4.23 / 5.00
What You Will Learn!
- NEXTJS13を使った開発方法が学べます
- appディレクトリの使い方が学べる
- NEXTJSを使って簡単なホームページを作れる
- 作ったアプリを一般公開する方法が学べる
- framer motionの使い方が学べる
- tailwindcssの使い方が学べる
- GitHubにコードを保存してvercelを使った公開の仕方が学べる
- react-iconの使い方が学べる
- vsコードの便利な拡張機能がわかり開発が楽になる
- 実用的なホームページが作れる
- ページにアニメーションをつける方法を学べる
Description
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
Who Should Attend!
- NEXTJS13を学びたい方
- ワードプレス以外で簡単なホームページを作りたい方
- HTML、CSSの基礎学習を終えて総合的なコンテンツを作りたい方
- ホームページ作成の総合力が欲しい方
- １人で全てを完結させたい方
- Tailwindcssを使ってスタイリングをしたい方
- サーバーやapiの技術はまだちょっと難しい方
- 実用的なウェブサイトを作りたい方
- 学習方法がわからない方
- JavaScript初学者の方