Reading-Notes

---

Project maintained by eslamakram Hosted on GitHub Pages — Theme by mattgraham

Readings: React 3

Create a Next.js App Next.js: The React Framework Enter Next.js, the React Framework. Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications.

Next.js aims to have best-in-class developer experience and many built-in features, such as:

An intuitive page-based routing system (with support for dynamic routes) Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis Automatic code splitting for faster page loads Client-side routing with optimized prefetching Built-in CSS and Sass support, and support for any CSS-in-JS library Development environment with Fast Refresh support API routes to build API endpoints with Serverless Functions Fully extendable Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world’s largest brands.

Create a Next.js app To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Run the development server You now have a new directory called nextjs-blog. Let’s cd into it:

cd nextjs-blog Then, run the following command:

npm run dev

Editing the Page Let’s try editing the starter page.

Make sure the Next.js development server is still running. Open pages/index.js with your text editor. Find the text that says “Welcome to” under the <h1> tag and change it to “Learn”. Save the file.

Next Up: Creating Pages

Create a new page using the integrated file system routing. Learn how to use the Link component to enable client-side navigation between pages. Learn about built-in support for code splitting and prefetching.

Link Component When linking between pages on websites, you use the HTML tag.

In Next.js, you use the Link Component from next/link to wrap the tag. allows you to do client-side navigation to a different page in the application.

Using First, open pages/index.js, and import the Link component from next/link by adding this line at the top:

import Link from ‘next/link’ Then find the h1 tag that looks like this:

<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>
And change it to:

<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

{‘ ‘} adds an empty space, which is used to divide text over multiple lines.

Next, open pages/posts/first-post.js and replace its content with the following:

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

As you can see, the Link component is similar to using tags, but instead of , you use and put an tag inside.