How

Simply create a JS file under the pages directory, and the path to the file becomes the URL path.

In Next.js, you use the React Component that wraps the tag. allows you to do client-side navigation to a different page in the application.

import Link from 'next/link'

CSS:

  • Import it as styles
  • Use styles.<class-name> as className
  • In this case, the class name is container, so we’ll use styles.container

CSS Modules does: It automatically generates unique class names. As long as you use CSS Modules, you don’t have to worry about class name collisions.

Furthermore, Next.js’s code splitting feature works on CSS Modules as well. It ensures the minimal amount of CSS is loaded for each page. This results in smaller bundle sizes.

In Next.js, you can add global CSS files by importing them from _app.js. You cannot import global CSS anywhere else.

To summarize what we’ve learned so far:

  • To use CSS Modules, import a CSS file named *.module.css from any component.
  • To use global CSS, import a CSS file in pages/_app.js.

2 forms of rendering

https://nextjs.org/learn/basics/data-fetching/two-forms

When to Use Static Generation v.s. Server-side Rendering

We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages, including:

  • Marketing pages
  • Blog posts
  • E-commerce product listings
  • Help and documentation

You should ask yourself: “Can I pre-render this page ahead of a user’s request?” If the answer is yes, then you should choose Static Generation.

On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request.

In that case, you can use Server-Side Rendering. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.

Static Generation with data

How does it work? Well, in Next.js, when you export a page component, you can also export an async function called getStaticProps. If you do this, then:

  • getStaticProps runs at build time in production, and…
  • Inside the function, you can fetch external data and pass that as the props of the page.

getStaticProps runs only on the server-side. It will never be run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers.

What If I Need to Fetch Data at Request Time?

Static Generation is not a good idea if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request.

In cases like this, you can try Server-side Rendering or skipping pre-rendering.

Using getServerSideProps

Because getServerSideProps is called at request time, its parameter (context) contains request specific parameters. You can learn more in our documentation.

if you do not need to pre-render the data, you can also use the following strategy (called Client-side Rendering):

  • Statically generate (pre-render) parts of the page that do not require external data.
  • When the page loads, fetch external data from the client using JavaScript and populate the remaining parts.

Pages that begin with [ and end with ] are dynamic pages in Next.js.

In pages/posts/[id].js, we’ll write code that will render a post page — just like other pages we’ve created.

Next.js and Vercel

Vercel is made by the creators of Next.js and has first-class support for Next.js. When you deploy your Next.js app to Vercel, the following happens by default:

  • Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from the Vercel Edge Network, which is blazingly fast.
  • Pages that use Server-Side Rendering and API routes will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.

Incremental Static Generation

you can specify fallback: true in getStaticPaths. Then, in the page itself, you can use router.isFallback to see if the loading indicator should be displayed.

With Next.js, you can use Static Generation for maximum performance without sacrificing the benefits of Server-side Rendering.

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation

However, by using Server-side Rendering, you’ll give up on the benefits of Static as mentioned above. We suggest trying Incremental Static Generation or Client-side Fetching and see if they fit your needs.

API routes allow us to write to external data sources securely. Using environment variables, we can include secrets for authentication without exposing the values client-side.