Before diving into writing your first Next.js project, it's essential to understand that there are now different ways to use Next.js: the App Router and the Pages Router. When referring to the official documentation, you need to select which of the two routers you're using, as many functionalities differ based on that choice.
App Router vs. Pages Router
Naming Convention and Structure
The two routers are named after the folders they use. The App Router uses a directory called app to keep all your pages and routes. In contrast, the Pages Router uses a pages folder.
Historical Context
The App Router is the new kid on the block, having been declared stable in version 13.4, released in May 2023. On the other hand, the Pages Router has been around since the inception of Next.js in 2016.
Current Recommendations
While the Pages Router is still supported and will continue to be maintained for multiple major versions, the App Router is now the recommended way to create new applications. This is mainly because the App Router is based on React Server Components, which are rendered only on the server, without sending any JavaScript code to the browser. Additionally, it supports Nested Layouts and other features not available in the Pages Router.
What Should You Learn?
Most developers should focus on learning the App Router, as it is the recommended way to build new Next.js apps. If you're working on an existing project built with the Pages Router, then you should also familiarize yourself with that. The choice depends on your specific needs:
App Router: Ideal for new projects and recommended for most use cases.
Pages Router: Useful if you are maintaining or updating an existing project.
Prerequisites
To follow along with Next.js development, you'll need:
A computer running macOS, Linux, or Windows.
A web browser, preferably the latest version of Google Chrome.
A code editor, preferably Visual Studio Code or Cursor.
A recent version of Node.js (Active LTS version recommended, i.e., v20.x).
Git, the version control tool.
Next.js 14, the latest major version released in October 2023.
Next Reviews Project
Overview
We'll build a project called "Next Reviews," a website for publishing indie game reviews. This project will help you learn all the Next.js fundamentals, including URL mapping, layouts, rendering, navigation, styling, images, static assets, custom fonts, and more.
Data Management
For the initial release, we'll store all data in local files. Review content will be written in Markdown format and then loaded and displayed on the page. Although most content will be static, we'll include a bit of interactivity with a "Share link" button, allowing users to copy the review URL to their clipboard.
Learning Outcomes
This project will help you understand the difference between Server Components and Client Components. We'll cover all the main features available when using Next.js as a Static Site Generator.
Static Site Generation vs. Full-Stack Framework
Static Site Generation
Using Next.js as a Static Site Generator means building your code into a folder containing only static files like HTML, JavaScript, and other assets. This allows you to deploy your website to any web server.
Full-Stack Framework
Using Next.js as a Full-Stack Framework requires running your code on a Node.js server. This setup supports Server-Side Rendering, where the server dynamically generates pages upon client requests, and Revalidation, which allows automatic regeneration of static pages either periodically or on demand.
Flexibility
Next.js offers the flexibility to start as a Static Site Generator and later switch to a Full-Stack Framework if you need additional features like Server-Side Rendering and Revalidation. This is the approach we'll take with our Next Reviews project.
Updates and Support
Updates and Corrections
Keep an eye out for updates or corrections related to Next.js and its libraries. New versions may require small changes to your code, so staying updated is crucial.
Support Policy
Online resources such as forums, documentation, and community support are invaluable. Here are some tips for troubleshooting and seeking help:
Ensure your question is strictly related to the Next.js content.
Attempt to debug issues yourself first; debugging is a crucial skill.
Compare your code with provided examples.
When asking for help, provide detailed information and error messages.
Conclusion
Next.js offers a powerful, flexible framework for building modern web applications. Whether you choose the App Router or the Pages Router, understanding the differences and capabilities of each will help you create efficient, scalable applications. Let's get started on our Next Reviews project and dive into the world of Next.js!
留言