close

Next.js 基本: ページの作成と基本の Routing 説明

Web アプリケーション開発のプロセスでは、ページの管理とページ間の移動は重要な側面です。 この記事シリーズでは、ページの作成と でのナビゲーションの実装の基礎を詳しく掘り下げていきます Next.js。 これらの基本的な概念は、柔軟で管理しやすい Web アプリケーションを構築するために不可欠です。

最初のページの作成と表示

まず、 で簡単なページを作成して表示する方法を理解しましょう Next.js。 pages プロジェクトのディレクトリ 内にファイルを作成することでページを作成できます。 たとえば、ウェルカム ページを作成するには、ディレクトリ welcome.js 内に名前を付けたファイルを作成します pages。 

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;

上記のコード スニペットでは、簡単なウェルカム ページを作成しました。 Web ブラウザでこのパスにアクセスすると /welcome 、「ようこそ Next.js !」というメッセージが表示されます。 表示されます。

基本 Routing

Next.js routing は、ページ間の移動を簡単にする 堅牢で直感的なシステムを提供します。 Routing in Next.js はディレクトリに基づいており pages 、このディレクトリ内の各ファイルは特定のパスに対応します。 たとえば、ディレクトリ about.js 内で名前が付けられたファイルは pages 、そのパスでアクセスできるページを作成します /about。

リンクとナビゲーションの作成

<Link> ページ間にリンクを作成し、ページ間を移動するには、ライブラリのコンポーネント を使用できます next/link。 以下は、ようこそページから会社概要ページへのリンクを作成する例です。 

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;

上の例では、[詳細についてはこちら] リンクをクリックすると、その /about ページにリダイレクトされます。

結論

このセクションでは、単純なページを作成および表示する方法と、ディレクトリとコンポーネント Next.js を使用してページ間のナビゲーションを実装する方法について 説明しました 。 これらは、アプリケーションを構築する際の重要な最初の手順です 。 今後の記事では、動的でインタラクティブな Web アプリケーションを構築するための他の側面を引き続き調査していきます 。 pages <Link> Next.js Next.js