search

mayu-tateno / nextjs-quick-learn

0 stars 0 forks source link

トップページのHTMLとCSSをいじってみる #1

Closed mayu-tateno closed 6 months ago

mayu-tateno commented 6 months ago

学習用メモ

公式のチュートリアルを読む進めつつ動かしてみる 最新なのでバージョンは14だが、他の入門用の教材を見てみると12系ではディレクトリ構成なども違う。 App Routerを使うかPages Routerを使うかの違いのよう。 14系ではApp Router推奨？

image

デフォルトのトップページ

image

文字を変更

image image

グローバルで設定している背景のCSSを変更

image

Summary by CodeRabbit

coderabbitai[bot] commented 6 months ago

Walkthrough

The app/page.tsx file has been updated to rename the exported function from Home to Page and simplify the content within the function to include a heading and a paragraph. This change streamlines the code and makes the function's purpose clearer.

Changes

File Change Summary
app/page.tsx Renamed exported function from Home to Page and simplified its content.

Poem

In the code where functions roam,
We changed the name from Home to Page,
Simplified with heading's tome,
A paragraph sets the stage.
🐇✨ Code's delight, a rabbit's sage!

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
mayu-tateno commented 6 months ago

ChatGPTに質問してみたこと

本当に情報が正しいとは限らないが、ざっくり理解するために聞いてみた。

AppRouterとPageRouterについて説明してください ※正しくはPages Router

Next.js では、ルーティングシステムとして App Router と Page Router の2つが提供されています。それぞれの特徴と違いについて説明します。

App Router App Router は Next.js 13 から導入された新しいルーティングシステムです。このシステムは React 18 の機能であるサーバーコンポーネントや、React 18 の並列レンダリングをサポートすることを目的としています。

特徴:

  1. ディレクトリ構造:
    • app ディレクトリに基づいたファイルシステムルーティングを使用します。
    • ファイルやディレクトリがページ、レイアウト、テンプレートなどの特定の役割を持ちます。
  2. サーバーコンポーネント:
    • React 18 のサーバーコンポーネントをサポートしており、クライアントサイドでのみ実行されるコードと、サーバーサイドで実行されるコードを分離できます。
  3. 並列データフェッチング:
    • 複数のデータソースから同時にデータをフェッチすることが可能です。 4.新しい API:
    • page.tsx、layout.tsx、loading.tsx、error.tsx などの新しいファイル命名規則と API を提供します。 例: 
      // app/page.tsx
export default function Page() {
return <h1>Hello, Next.js with App Router!</h1>
}

      Page Router Page Router は Next.js の従来からあるルーティングシステムです。Next.js の初期バージョンから存在し、ファイルベースのルーティングを簡単に提供するために設計されています。

特徴:

  1. ディレクトリ構造:
    • pages ディレクトリに基づいたファイルシステムルーティングを使用します。
    • ファイル名がそのまま URL パスになります。
  2. クライアントサイドレンダリング:
    • 主にクライアントサイドでの動的なルーティングをサポートしています。
    • getStaticProps、getServerSideProps、getStaticPaths などのデータフェッチングメソッドを提供します。
  3. シンプルで直感的:
    • シンプルなページベースの構造で、Next.js の入門者にとって理解しやすいです。 例: 
      // pages/index.js
export default function Home() {
return <h1>Hello, Next.js with Page Router!</h1>
}

      比較まとめ App Router は新しいルーティングシステムで、サーバーコンポーネントや並列データフェッチングをサポートしています。大規模なプロジェクトやサーバーサイドレンダリングを重視する場合に適しています。 Page Router は従来のルーティングシステムで、シンプルで直感的です。小規模なプロジェクトやクライアントサイドレンダリングを中心とする場合に適しています。 どちらのルーターもそれぞれの利点があるため、プロジェクトの要件に応じて選択すると良いでしょう。

参考記事

https://qiita.com/Yasushi-Mo/items/865a8d6e1a063058d702 https://zenn.dev/collabostyle/articles/7377d383430bf3 https://qiita.com/YushiYamamoto/items/a02c96a4348b00467972

SSRを重視する場合 検索エンジンへのインデックス登録やオフラインでの読み取りが必要な場合は、Pages Routerがおすすめです。 サーバーサイドの負荷を軽減したい場合 サーバーサイドの負荷を軽減したい場合は、App Routerがおすすめです。

なるほど