Next.js を使用して開発者ポートフォリオを構築およびデプロイする方法

開発者ポートフォリオは、スキルと経験を示す作業サンプルとプロジェクトのコレクションです。 強力なポートフォリオにより、仕事を探す際に他の候補者と差をつけることができます。 それだけではありません。ポートフォリオは、ネットワーキング、学習の追跡、最終的には対象分野の専門家としての地位を確立するための便利なツールにもなります。

このチュートリアルでは、Next.js を使用して開発者ポートフォリオを構築し、GitHub リポジトリから無料の.kinsta.appドメインを提供する Kinsta のアプリケーション ホスティング プラットフォームに直接デプロイして、作業を迅速に開始する方法を学びます。

Next.js で構築する開発者ポートフォリオのライブ デモを次に示します。 詳しく調べたい場合は、このプロジェクトの GitHub リポジトリにアクセスできます。または、私が作成したこの Next.js ポートフォリオ スターター プロジェクトをフォークすることもできます。 スターター ポートフォリオには、スタイル、Font Awesome CDN リンク、画像、基本構造などの基本的なコードが含まれています。

要件/前提条件

これは「フォローアロング」タイプのチュートリアルです。 次のものがあれば、コーディングが容易になります。

• HTML、CSS、JavaScript の基礎知識
• React とおそらく Next.js に関する少しの知識
• Node.js と npm (Node Package Manager) または yarn がコンピューターにインストールされている

なぜ Next.js なのか?

Next.js は、React ベースのオープンソース JavaScript ライブラリ フレームワークであり、サーバー側でレンダリングされた静的アプリケーションの構築を簡素化するため、幅広い Web 開発プロジェクトに使用できます。 React の最高の機能を活用し、レンダリング パフォーマンスを最適化してユーザー エクスペリエンスを向上させることで、プロセスを合理化します。 Next.js の最も一般的な使用例には、次のようなものがあります。

• 静的 Web サイトの構築: Next.js は、このチュートリアル全体で構築する開発者ポートフォリオ Web サイトのように、高速でデプロイが簡単で、最小限のメンテナンスしか必要としない静的 Web サイトを構築できます。
• 動的 Web サイトの構築: Next.js を使用すると、ユーザーの操作やサーバー側のデータ取得に基づいてコンテンツを変更できる動的 Web サイトを作成できます。

• Web サイトのパフォーマンスの向上: サーバー側のレンダリングを使用すると、Next.js はページの読み込みにかかる時間を短縮することで、Web サイトのパフォーマンスを向上させることができます。

• e コマース Web サイトの構築: Next.js は、SEO とパフォーマンスを向上させるためにサーバー側のレンダリングを必要とする e コマース Web サイトの構築に適しています。

• プログレッシブ Web アプリケーション (PWA) の構築: Next.js は、ネイティブ アプリのように機能し、ユーザーのデバイスにインストールできる Web アプリケーションである PWA の作成をサポートします。

Next.js 開発環境の設定方法

Next.js の開発環境をセットアップするには、最初に Node.js をコンピューターにインストールします。これは、 npxコマンドを使用して、システムにグローバルにインストールすることなく npm パッケージを実行するためです。 これを処理したら、次のコマンドを実行して Next.js プロジェクトを作成できます。

 npx [email protected] my-portfolio

いくつかの追加の依存関係を確認するプロンプトが表示されます。 次に、 npm run devを実行して、アプリをlocalhost:3000で利用できるようにします。

npxコマンドを使用して Next.js プロジェクトを作成すると、次のメイン ディレクトリを含むフォルダー構造が自動的にスキャフォールディングされます。

1. pages : このフォルダーにはアプリケーションのページが含まれており、ファイル名に基づいて自動的にルーティングされます。 たとえば、 pages/index.js がホームページになり、 pages/about.jsが概要ページになります。
2. public : このフォルダーには、画像、フォント、その他のアセットなど、直接提供できる静的ファイルが含まれています。
3. components : このフォルダーはオプションで、アプリケーション全体で使用できる再利用可能な UI コンポーネントが含まれています。
4. styles : このフォルダーもオプションで、アプリケーション全体に適用できるグローバル スタイルが含まれています。

特定の構成と機能に応じて、他のディレクトリとファイルも生成される場合がありますが、これらは基本的な Next.js プロジェクトのコア ディレクトリです。

このチュートリアルでは、作成したものはすべてインデックス ページ (1 ページの Web サイト) に表示され、ヒーロー、概要、プロジェクトなどのさまざまなセクションのコンポーネントを含めます。

Next.js を使用してレスポンシブな開発者ポートフォリオを構築する方法

ポートフォリオは通常、次のようなコンポーネントで構成されます。

• Navbar コンポーネント
• ヒーロー コンポーネント
• コンポーネントについて
• スキルコンポーネント
• プロジェクト コンポーネント
• 接触部品
• フッター コンポーネント

ポートフォリオに複数のページがある場合、Navbar および Footer コンポーネントはすべてのページに表示されることが期待されます。 これは、レイアウトを定義することで Next.js で実現できます。

Next.js でレイアウトを定義する

Next.js では、レイアウトは Web サイトのすべてのページに表示されるコンポーネントの一貫した構造を定義する方法です。 通常、レイアウトには、すべてのサイト ページに表示されるヘッダー、ナビゲーション メニュー、フッターなどの要素が含まれます。

Next.js プロジェクトのsrc (ソース) ディレクトリに components フォルダーを作成することから始めます。 次に、Layout コンポーネント内で使用される Navbar および Footer コンポーネントを作成します。

Navbar.jsxの Navbar コンポーネントは次のとおりです。

 // components/Navbar.jsx import Link from "next/link"; const Navbar = () => { return ( <div className="nav-container"> <div className="logo"> <Link href="/"> Joe's Portfolio </Link> </div> <a href="" className="cta-btn">Resume</a> </div> ) } export default Navbar;

Footer.jsx の Footer コンポーネントは次のとおりです。

 // components/Footer.jsx const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> {new Date().getFullYear()} Joel's Portfolio </p> <div className="social_icons"> <a href="https://twitter.com/olawanle_joel" aria-label="Twitter" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel" aria-label="GitHub" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;

注: Font Awesome アイコンを機能させるには、Font Awesome をプロジェクトにインストールするか、その CDN を使用する必要があります。 次のように、CDN リンクを_document.jsファイルに追加できます。

 // pages/_document.js import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); }

注: CDN 経由で Font Awesome の別のバージョンにリンクする場合は、そのリリースの適切なintegrityハッシュの上にスワップインする必要があります。

レイアウトに必要なすべてのコンポーネントを作成したら、レイアウト コンポーネント自体を作成し、その中にページ コンテンツをラップして、このコンポーネントをページに追加できます。

Layout コンポーネントは >code>children prop を受け入れ、Next.js ページのコンテンツにアクセスできるようにします。

 // components/Layout.jsx import Navbar from './navbar'; import Footer from './footer'; const Layout = ({ children }) => { return ( <> <Navbar /> <main>{children}</main> <Footer /> </> ) } export default Layout;

この時点で、適切に配置された子小道具と一緒に Navbar と Footer を保持する Layout コンポーネントが正常に作成されました。 ページコンテンツをラップすることで、レイアウトコンポーネントをページに追加できるようになりました。 これは_app.jsファイルで行われます。

 // pages/_app.js import '@/styles/globals.css'; import Layout from '../components/layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> ); }

これで、開発者ポートフォリオのレイアウトの作成に成功しました。 このポートフォリオでは、Next.js と、ウェブサイトを Kinsta にデプロイする方法に重点を置いています。 そのため、styles/globals.css ファイルのスタイルを独自のプロジェクトにコピーできます。 ポートフォリオ Web サイトを開発モードで起動すると、アプリのレイアウトが表示されます。

次に、ポートフォリオ Web サイトに適切なコンテンツを提供します。

ポートフォリオ コンポーネントの構築

開発者のポートフォリオのセクションごとに個別のコンポーネントを作成できるようになりました。 これらのコンポーネントはすべて Next.js プロジェクトのインデックス ページにインポートされるため、 npm run devでプロジェクトを起動すると表示されます。

ヒーロー コンポーネント

Hero コンポーネントは Navbar の下の最初のセクションで、主な目的はユーザーの注意を引き、Web サイトやアプリケーションが何であるかを理解させることです。

 // components/Hero.jsx import Image from "next/image"; const Hero = () => { return ( <div className="hero-container"> <Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" /> <div className="hero-text"> <h1>Hey, I'm Joe </h1> <p> I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between. </p> <div className="social-icons"> <a href="https://twitter.com/olawanle_joel" aria-label="Twitter" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel" aria-label="GitHub" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </div> ) } export default Hero;

上記のコードでは、画像を追加するために HTML imgタグの代わりに Next.js 画像コンポーネントが使用されていることがわかります。これにより、画像の自動最適化、サイズ変更などが可能になるからです。

About コンポーネントでは、ソーシャル リンクを追加するために、Font Awesome のいくつかのソーシャル アイコンと一緒に、開発者についてほとんど語らない簡単な段落が追加されていることにも気付くでしょう。

Hero コンポーネントは次のようになります。

Hero コンポーネントにさらにコンテンツを追加したり、 styles/globals.cssファイルのスタイルを調整したり、独自の方法でこのセクションを再作成したりすることもできます。

About コンポーネント

About コンポーネントは、あなたのポートフォリオにアクセスする読者や人々に、あなたに関するより多くの情報を必要な数の段落で伝えることを目的としています。 自分自身についてもっと知りたい場合は、専用の「自己紹介」ページを作成し、このセクションにボタンを追加して、自分自身について詳しく読むことができます。

 // components/About.jsx import Image from "next/image"; const About = () => { return ( <div className="about-container"> <h2>About Me</h2> <div className="flex-about"> <div className="about-text"> <p> As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality. </p> <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p> </div> <div className="about-img"> <Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/> </div> </div> </div> ) } export default About;

上記のコードには、開発者に関する 2 つの段落と、開発者の画像が含まれています。 About セクションは次のようになります。

いつでもスタイルを微調整して、より多くの画像を追加できます。

スキル コンポーネント

スキル コンポーネントは、開発者が最もよく使用するテクノロジまたは開発者が過去に使用したテクノロジの一部を示すことを目的としています。

外部ファイルに配列を作成してからスキル コンポーネントにインポートすることで、これを簡単に維持できるため、同様のコードを複製する代わりにループすることができます。

 // components/Skills.jsx const Skills = () => { return ( <div className="skills-container"> <h2>Skills</h2> <div className="grid-skills"> <div className="skill-card html"> <i className="fa-brands fa-html5 html-icon"></i> <p>HTML</p> </div> <div className="skill-card css"> <i className="fa-brands fa-css3-alt css-icon"></i> <p>CSS</p> </div> <div className="skill-card js"> <i className="fa-brands fa-js-square js-icon"></i> <p>JavaScript</p> </div> <div className="skill-card react"> <i className="fa-brands fa-react react-icon"></i> <p>React</p> </div> <div className="skill-card node"> <i className="fa-brands fa-node-js node-icon"></i> <p>Node</p> </div> <div className="skill-card python"> <i className="fa-brands fa-python python-icon"></i> <p>Python</p> </div> </div> </div> ) } export default Skills;

上記のコードでは、スキルごとにカードが作成され、各カードには font-awesome のテクノロジー アイコンとテクノロジー名が保持されます。 スタイルを追加したり、コードを微調整して、より魅力的でユニークなものにすることもできます。

プロジェクト コンポーネント

プロジェクト コンポーネントは、開発者のポートフォリオの重要なセクションの 1 つです。 プロジェクトは、開発者のスキルと能力の具体的な証拠を提供し、知識を現実世界の問題に適用する能力を示します。

各プロジェクトには、プロジェクトの簡単な説明、そのソース コードへのリンク (ここでは GitHub リンクを使用しています)、および追加したいその他の詳細が含まれます。

各プロジェクトの詳細を保持する配列を作成し、それをコンポーネントにインポートして、ハードコーディングを回避できます。

プロジェクト データの配列を格納するためのdata.jsファイルを作成しましょう。 このファイルは、コンポーネント フォルダーまたはpages/apiフォルダーに保存できます。 このデモでは、components フォルダーに保存します。 この配列は各プロジェクトのオブジェクトを保持し、オブジェクトはプロジェクト名、説明、および GitHub リンクを保持します。

 // components/data.js export const projectData = [ { id: 1, title: 'Todo List App', description: 'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.', gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App', }, { id: 2, title: 'Books Library App', description: 'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.', gitHubLink: 'https://github.com/olawanlejoel/Book-Library', }, { id: 3, title: 'Quotes Generator', description: 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.', gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator', }, { id: 4, title: 'Password Generator', description: 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.', gitHubLink: 'https://github.com/olawanlejoel/Password-Generator', }, { id: 5, title: 'Twitter UI Clone', description: 'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.', gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone', }, ];

プロジェクト コンポーネントを作成して、簡単にループしてこのデータを利用できるようになりました。 任意の JavaScript 反復メソッドを使用できますが、このチュートリアルでは、JavaScript のmap()配列メソッドを使用して、データ配列を Projects コンポーネントにインポートした後、データ配列を調べることができます。

 // components/Projects.jsx import { projectData } from './data.js'; const Projects = () => { return ( <div className="projects-container"> <h2>Projects</h2> <div className="projects-grid"> {projectData && projectData.map((project) => ( <div className="project-card" key={project.id}> <div className="project-header"> <i className="fa-regular fa-folder-open folder-icon"></i> <div className="small-icons"> <a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a> </div> </div> <h3>{project.title}</h3> <p>{project.description}</p> </div> )) } </div> </div> ) } export default Projects;

上記のコードでは、配列をループしてすべてのプロジェクトを Projects コンポーネントに出力することで繰り返しを回避し、プロジェクトの維持と追加を容易にしています。

連絡先コンポーネント

開発者のポートフォリオを作成する理由の 1 つは、潜在的なクライアントがあなたに連絡できるようにするためです。 1 つの方法は、人々があなたに電子メールを送信することです。これは、この連絡先コンポーネントで容易にするものです。

 // components/Contact.jsx const Contact = () => { return ( <div className="contact-container"> <h2>Get In Touch</h2> <p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!</p> <a href="mailto:[email protected]" className='cta-btn'>Say Hello</a> </div> ) } export default Contact;

ボタンがあなた宛てのメッセージを含む電子メール アプリケーションを起動するように、電子メール アドレスをaタグに配置します。

これで、ポートフォリオ アプリケーションのすべてのコンポーネントが正常に作成されました。 次のステップは、それらをインデックス ページに追加することです。 デフォルトで作成されるpages/index.jsファイルに移動し、そのコードを次のように置き換えます。

 // pages/index.js import Hero from '@/components/Hero'; import About from '@/components/About'; import Skills from '@/components/Skills'; import Projects from '@/components/Projects'; import Contact from '@/components/Contact'; import Head from 'next/head'; const Home = () => { return ( <> <Head> <title>Joel's Portfolio</title> <meta name="description" content="Joel's Portfolio" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <div> <Hero /> <About /> <Skills /> <Projects /> <Contact /> </div> </> ); }; export default Home;

アプリケーションを実行すると、完全なポートフォリオ Web サイトが作成されていることがわかります。 最後に、アプリケーションをデプロイする前に、依存関係をインストールしましょう。 Next.js を使用する利点の 1 つは、ファイルベースのルーティング、画像の最適化など、多くの機能を提供できることです。

画像の最適化は、Next.js Imageコンポーネントで処理されます。 Next.js Image コンポーネントを使用するアプリケーションを本番環境にデプロイする前に、sharp をインストールすることを強くお勧めします。 これを行うには、ターミナルに移動し、プロジェクトのディレクトリにいることを確認してから、次のコマンドを実行します。

 npm i sharp

アプリケーションをデプロイできるようになりました。Next.js が提供する完全な最適化により、画像が適切に機能します。

Next.jsアプリケーションをKinstaにデプロイする方法

最高の開発作業と重要な情報を紹介するポートフォリオに満足したら、それを他の人と共有したいと思うでしょう。 GitHub と Kinsta のアプリケーション ホスティング プラットフォームを使用してそれを行う方法を見てみましょう。

コードを GitHub にプッシュする

コードを GitHub にプッシュするにはさまざまな方法がありますが、このチュートリアルでは Git コマンド ライン インターフェイスを使用します。 Git は、コードの変更を管理し、プロジェクトで共同作業し、バージョン履歴を維持するための信頼できる効率的な方法を提供するため、ソフトウェア開発で広く使用されています。

次の手順を使用して、コードを GitHub にアップロードできます。

まず、新しいリポジトリを作成します (コードを保存するローカル フォルダーと同様)。 これを行うには、GitHub アカウントにログインし、画面の右上隅にある[+]ボタンをクリックして、下の画像に示すようにドロップダウン メニューから[新しいリポジトリ]を選択します。

次のステップでは、リポジトリに名前を付け、説明を追加し (オプション)、リポジトリを公開するか非公開にするかを選択します。 次に、 [リポジトリの作成]をクリックします。 コードを新しい GitHub リポジトリにプッシュできるようになりました。

Git を使用してコードをプッシュするために必要なのは、リポジトリの URL だけです。これは、リポジトリのメイン ページ、 [クローンまたはダウンロード]ボタンの下、またはリポジトリの作成後に表示される手順で見つけることができます。

ターミナルまたはコマンド プロンプトを開き、プロジェクトを含むディレクトリに移動して、コードをプッシュする準備をすることができます。 次のコマンドを使用して、ローカル Git リポジトリを初期化します。

 git init

次のコマンドを使用して、コードをローカル Git リポジトリに追加します。

 git add .

上記のコマンドは、現在のディレクトリとそのサブディレクトリ内のすべてのファイルを新しい Git リポジトリに追加します。 次のコマンドを使用して、変更をコミットできるようになりました。

 git commit -m "my first commit"

注: 「私の最初のコミット」を、行った変更を説明する独自の短いメッセージに置き換えることができます。

最後に、次のコマンドを使用してコードを GitHub にプッシュします。

 git remote add origin [repository URL] git push -u origin master

注: 「[リポジトリ URL]」を自分の GitHub リポジトリの URL に置き換えてください。

これらの手順を完了すると、コードが GitHub にプッシュされ、リポジトリの URL からアクセスできるようになります。 これで、リポジトリを Kinsta にデプロイできます。

ポートフォリオをKinstaにデプロイする

Kinstaへの展開はわずか数分で完了します。 My Kinstaのダッシュボードから始めて、ログインするかアカウントを作成してください。

次に、次の簡単な手順で GitHub で Kinsta を承認します。

1. 左側のサイドバーで[アプリケーション]をクリックします
2. [サービスを追加]をクリックします
3. Next.jsアプリケーションをKinstaにデプロイするため、ドロップダウンメニューからアプリケーションをクリックします。

デプロイするリポジトリを選択できるモーダルが表示されます。

リポジトリに複数のブランチがある場合は、デプロイするブランチを選択できます。 このアプリケーションに名前を割り当てることもできます。 利用可能な25か所の中からデータセンターの場所を選択してください.Kinstaは自動的に開始コマンドを検出します.

この時点で、アプリケーションのデプロイが開始されます。 数分以内に、アプリケーションのデプロイされたバージョンにアクセスするためのリンクが提供されます。 この場合、https: //kinsta-developer-portfolio-ir8w8.kinsta.app/です。

注:自動デプロイが有効になっているため、コードベースに変更を加えて GitHub にプッシュするたびに、Kinsta はアプリケーションを自動的に再デプロイします。

まとめ

開発者が Web プロジェクトで Next.js の使用を検討すべき理由はいくつかあります。 まず、ページの読み込み時間を短縮するのに役立つプリフェッチやコード分割などの機能を使用して、すぐに最適化されたパフォーマンスを提供します。 次に、React 開発者に使い慣れた開発エクスペリエンスを提供し、スタイル付きコンポーネントや React フックなどの一般的なツールをサポートします。

Next.js は、従来のサーバーベースのホスティングから、Kinsta のような最新のサーバーレス プラットフォームまで、さまざまな展開オプションもサポートしています。 これにより、開発者は、フレームワークのパフォーマンスの最適化やその他の利点を活用しながら、ニーズに最適な展開オプションを選択できます。

このチュートリアルでは、Next.js を使用してレスポンシブ ポートフォリオ サイトを構築し、Kinsta のアプリケーション ホスティング プラットフォームにデプロイする方法を段階的に学びました。

新しく開発したポートフォリオ Web サイトにさらに機能を追加して、自分自身に挑戦してください。 詳細な情報を含むページを追加する、ブログを MDX と統合する、アニメーションを実装するなど、創造力をかき立てるためのアイデアをいくつかご紹介します。

また、低コストのアプリケーション ホスティング ホビー ティアと無料トライアル オファーを利用して、Kinsta を始めることができます。

以下のコメントであなたのプロジェクトと経験を共有してください。