見出し画像

集客しやすいNext.jsを無料などで作品集なポートフォリオを公表するでデプロイをするにはGitHubなどを使う必要があります

プログラミングの歴史は、プログラミング言語だけで自分で作るのは無駄なので、ライブラリーで共用し、そしてそのライブラリーを更新した、フレームワークを設置し、少し改変ですぐに完成という、簡単さが進みました。

Reactとはプログラミング言語のJavaScriptでWebアプリケーションを作るのは困難なので、改良されたJavaScriptライブラリーで、コンポーネントの管理などが簡単になり、人気があります。

しかし最初に表示される画面が真っ白になり、集客であるSEOで劣ります。これらを改良したのがReactのフレームワークのNext.jsとなります。

また他の多くの(プログラミング)言語やFW(フレームワーク)よりも、構文チェックが厳しそうなので、これは自動的に正しいHTMLなどが使えるので、SEOの能力が高くなります。

Next.jsが世界では多く使われ、日本では少ない理由は、機能の不足ではなく、日本語版の説明が少なく、英語のみの多さからだと思います。しかしSEOで必要なのは、検索大手が英語圏中心なので、英語化しないと集客できません。

GitHubにNext.jsのインストール直後のテンプレートをデプロイしました

①GitHubではソースコードが見れます
https://github.com/shimada-print/nextjs

書類名の前に.(ピリオド)がついている書類は、これは隠し書類で、ログインした開発者しか見れません。

GitHub以外でも、ソースコードや画像などを格納できるサービスはあります。Gitなどのツールを使わなくても、Webページで簡単に操作できます。

②Next.jsの開発元のVercelなどでは公開動作できます
https://nextjs-gray-six-83.vercel.app/

Vercel以外でもGo言語などのUnixなどで動作するものを、デプロイできるサイトはあります。数多くのテンプレートもあり、Webページで簡単に操作できます。

テンプレートの「nextjs」でデプロイし、少し改変すると、以下のようなWebページが表示されます。

画像1

ただし私が改変してますので、普通は英文のみでGet ⋯という文章の上の、画像や日本語での説明はありません。英文という事は、日本語向けなWebサイトを作る時は、日本語で表示できるか?などの確認もした方が良いです。

GitHubの「local-boot-nextjs-dev.vbs」は面倒なコマンド入力しなくても、ダブルクリックするだけで、貴方のPC内のローカルホストで開発できる、WindowsOSで動く、私が作ったVisulBasicScriptです。

ローカルホストで開発する長所は、社内秘にしたいなどです。マイクロソフトの.jsでも作れますが、Next.jsの書類と混同するのでVBSです。VBSは簡単なので、今も意外と多くの会社の業務で使用が多いと思います。

ホームページの「index.js」は、Next.jsをインストールした直後にできた書類ですが、それを改変し、念のためにindex-1st.jsと改名し保存しています。画像はpublicフォルダに入れ、独自でimageフォルダを作っても表示できません。この方が画像書類の検索もしやすそうです。

たぶん大規模システムの構築では、技術者個人別の判断でバラバラになると混乱するからだと思います。これが他の言語やFW(フレームワーク)だと出来ていない事が多いです。


HTML書類はSEOや大規模システム運用などでの
パフォーマンスが落ちるので設置しない方が良いです

Next.jsがHTML書類が無い特殊さも、これでHTML書類が作れると、開発者別により、バラバラな設置などをするので、JavaScript書類内などで規則性を持たせた方が、大量な情報がある、大規模システムでは向いています。

この「誰がプログラミングしても変わらない混乱しない統一性」というのが、Next.jsだけでなくNestJSやGo言語などのモダン(最新)な言語やFWやJavaScriptライブラリーなどで、求められているのが現代です。

またGitHubではREADME.mdというテキスト書類があり、ソースコードの説明は、これでした方が良いです。ソースコード内でやたらと長い説明文も、混乱の元です。

README.mdはGitHubのフォルダを見ると、一緒に表示され、英数空白2個を入れると改行されるなどの、独自な文法もあります。

またVercelなどでテンプレートをインストールすると、その内容が記録されていますので、これをREADME-inst.mdなどと改名し、新たに開発に必要なREADME.mdを作成しても良いでしょう。

この記事が気に入ったらサポートをしてみませんか?