You can create a new Next.js application by running the command npx create next app [app-name] in your terminal.
To start the application in development mode, you use the command npm run dev. This typically runs your app on localhost:3000.
Styling (styles Directory)
Next.js supports CSS Modules out of the box, which helps manage styles without naming conflicts.
Styles that apply globally to the entire application can be defined in a file like globals.css inside the styles directory.
For component-specific or route-specific styles, you create files with the .module.css extension (e.g., Home.module.css).
In your React component files (the “.js” or “.jsx” files), you import the style sheet (e.g., import styles from '../styles/Home.module.css').
You then reference the styles in your JSX using a JavaScript-like object syntax (e.g., <div className={styles.container}>).
File-based Routing (pages Directory)
This is a fundamental concept. The structure of files and directories within the pages directory directly maps to the URLs (routes) of your application.
_app.js: This special file acts as the main entry point or a template for every page in your application. It wraps around all your individual pages.
index.js: A file named index.js inside the pages directory (or any subdirectory) represents the root URL for that directory. pages/index.js is the component for the main root URL /.
Creating a Simple Route: To create a page at /hello, you simply create a file named hello.js inside the pages directory. This file must export a default React component. Next.js will then render this component when a user visits /hello.
Dynamic Routes: For routes with variable parts, like /cars/tesla or /cars/lambo, you use square brackets in the file name. For example, pages/cars/[paramname].js creates a dynamic route under /cars/.
Inside the component for [paramname].js, you can access the variable part of the URL (tesla, lambo, etc.) using the useRouter hook from next/router. The dynamic segment’s name (like paramname) corresponds to the key you’ll find in the router’s query object.
api Directory: This is a special subdirectory inside pages specifically for creating server-only routes. Code placed here runs on the server side and is not included in the JavaScript bundle sent to the user’s browser. This is useful for backend logic or creating an API for your frontend.
Data Fetching and Server Rendering Strategies
This is highlighted as the “most valuable feature”. Next.js allows fetching data and rendering HTML on the server, providing benefits like faster initial load and better SEO. There are two main strategies described:
Static Generation (Pre-rendering): The HTML for pages is generated at build time when you run the build command.
getStaticProps: To fetch data for a static page, you export an async function named getStaticProps from your page file. Next.js runs this function during the build process, fetches the data (e.g., from an API or database), and then passes the returned data as props to your React component for that page. This function receives arguments like params if it’s for a dynamic route.
getStaticPaths: For dynamic routes that are statically generated (like pages/cars/[id].js), Next.js needs to know which specific paths (e.g., /cars/tesla, /cars/forward) should be pre-rendered at build time. You export an async function called getStaticPaths from the dynamic page file. This function must return an object containing a paths array, where each object in the array specifies a params object for a specific route to be built. This allows Next.js to build all the required dynamic pages statically.
Ideal For: Pages where data doesn’t change often, like a blog or documentation.
Benefit: Very high performance as pages are served as static HTML files, easily cached on a CDN.
Drawback: Data can become stale; requires rebuilding and redeploying to update content. Not suitable for millions of dynamic pages.
Server-Side Rendering (SSR): The HTML for the page is generated on the server for each incoming request.
getServerSideProps: To implement SSR, you export an async function named getServerSideProps from your page file. This function runs on the server every time a user requests the page. Like getStaticProps, it fetches data and passes it as props to your component.
Ideal For: Pages where data changes frequently and users need to see the very latest information, like an auction listing.
Benefit: Ensures users always get the most up-to-date data.
Drawback: Less efficient than Static Generation because the server has to process each request, cannot cache the HTML globally as easily.
Incremental Static Regeneration (ISR): Briefly mentioned as an option in between Static Generation and SSR. By adding a revalidate option to getStaticProps, you can tell Next.js to regenerate a static page after build time when a request comes in, but only if a certain time interval has passed.
Mixing Strategies: A key advantage is that you can use different rendering strategies (Static Generation or Server-Side Rendering) for different pages within the same Next.js project. You are not limited to just one approach.
SEO with the Head Component
To add important SEO information like the page title and meta tags to the <head> section of your HTML document, you can import the built-in Head component from next/head.
Anything placed inside the <Head> component in your page component will be rendered into the document’s <head>. This is crucial for search engine indexing and how your content appears when shared on social media.