Next.js - Szybki przewodnik

Next.js to platforma oparta na reakcjach z możliwością renderowania po stronie serwera. Jest bardzo szybki i przyjazny dla SEO.

Korzystając z Next.js, możesz łatwo stworzyć solidną aplikację opartą na reagowaniu i przetestować ją. Oto kluczowe cechy Next.js.

• Hot Code Reload - Serwer Next.js wykrywa zmodyfikowane pliki i ładuje je automatycznie.

• Automatic Routing- Nie ma potrzeby konfigurowania żadnego adresu URL do routingu. pliki należy umieścić w folderze stron. Wszystkie adresy URL zostaną zmapowane do systemu plików. Dostosowanie można wykonać.

• Component specific styles - styled-jsx zapewnia obsługę stylów globalnych i specyficznych dla komponentów.

• Server side rendering - komponenty React są wstępnie renderowane na serwerze, dzięki czemu ładują się szybciej na kliencie.

• Node Ecosystem - Next.js, który reaguje na żele, dobrze współpracuje z ekosystemem Node.

• Automatic code split- Next.js renderuje strony z potrzebnymi bibliotekami. Next.js zamiast tworzyć pojedynczy duży plik javascript, tworzy wiele zasobów. Po załadowaniu strony ładowana jest tylko wymagana strona JavaScript.

• Prefetch - Next.js udostępnia komponent Link, który jest używany do łączenia wielu komponentów, obsługuje właściwość pobierania wstępnego w celu wstępnego pobierania zasobów strony w tle.

• Dynamic Components - Next.js pozwala dynamicznie importować moduły JavaScript i komponenty React.

• Export Static Site - Next.js pozwala wyeksportować pełną statyczną stronę z Twojej aplikacji internetowej.

• Built-in Typescript Support - Next.js jest napisany w Typescripts i zapewnia doskonałą obsługę Typescript.

Ponieważ Next.js jest frameworkiem opartym na reakcjach, używamy środowiska Node. Teraz upewnij się, że maszNode.js i npmzainstalowany w twoim systemie. Możesz użyć następującego polecenia, aby zainstalować Next.js -

npm install next react react-dom

Po pomyślnym zainstalowaniu Next.js można zobaczyć następujące dane wyjściowe -

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Teraz stwórzmy pakiet node.json -

npm init

Wybierz wartości domyślne podczas tworzenia pliku package.json -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

Teraz zaktualizuj sekcję skryptów w pliku package.json, aby zawierała polecenia Next.js.

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

Utwórz katalog stron.

Utwórz folder stron w folderze nextjs i utwórz plik index.js z następującą zawartością.

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

W Next.js możemy tworzyć strony i nawigować między nimi za pomocą funkcji routingu systemu plików. UżyjemyLink do nawigacji między stronami po stronie klienta.

W Next.js strona jest komponentem React i jest eksportowana z katalogu pages. Każda strona jest powiązana z trasą na podstawie nazwy pliku. Na przykład

• pages/index.js jest połączony z trasą „/”.

• pages/posts/first.js jest powiązany z trasą „/ posts / first” i tak dalej.

Zaktualizujmy projekt nextjs utworzony w rozdziale Konfiguracja środowiska .

Utwórz katalog post i first.js w nim z następującą zawartością.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Dodaj obsługę linków, aby wrócić do strony głównej. Zaktualizuj first.js w następujący sposób -

import Link from 'next/link'

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

Dodaj obsługę linków do strony głównej, aby przejść do pierwszej strony. Zaktualizuj plik index.js w następujący sposób -

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij First Link, a zobaczysz następujące dane wyjściowe.

W Next.js możemy bardzo łatwo wyświetlać statyczne strony, takie jak obrazy, poprzez ich umieszczenie public, katalog najwyższego poziomu. Możemy odsyłać te pliki w podobny sposób, jak strony wpages informator.

W Next.js strona jest komponentem React i jest eksportowana z katalogu pages. Każda strona jest powiązana z trasą na podstawie nazwy pliku.

Zaktualizujmy projekt nextjs używany w rozdziale Strony .

Utwórz katalog publiczny i umieść w nim dowolne obrazy. Zrobiliśmy logo.png, obraz logo TutorialsPoint.

Zaktualizuj first.js w następujący sposób -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Tutaj dodaliśmy odniesienie do logo.png w pliku index.js.

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

katalog publiczny jest również przydatny w przypadku celów SEO. Może być używany do robot.txt, weryfikacji witryny Google lub innych statycznych zasobów w aplikacji internetowej.

W Next.js możemy bardzo łatwo zmodyfikować sekcję nagłówkową każdej strony za pomocą <Head> reagować na wbudowany komponent.

Zaktualizujmy projekt nextjs używany w rozdziale Strony .

Zaktualizuj plik index.js w następujący sposób -

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

Zaktualizuj first.js w następujący sposób -

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

Tutaj dodaliśmy odniesienie do logo.png w pliku index.js.

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij łącze Pierwsza strona i sprawdź, czy tytuł został zmieniony również na stronie pierwszego posta.

W Next.js możemy użyć wbudowanej biblioteki css-in-js o nazwie styled-jsx. Pozwala na pisanie css w komponencie reagującym, a style te będą ograniczone do komponentu.

W tym przykładzie utworzymy obiekt Container, który będzie używany do stylizowania innych komponentów poprzez ich zawarcie.

Zaktualizujmy projekt nextjs używany w rozdziale Metadane .

Najpierw utwórz katalog Components na poziomie głównym i dodaj plik container.module.css w następujący sposób -

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Utwórz plik container.js w katalogu komponentów

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Teraz użyj komponentu Container w first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce i przejdź do pierwszego postu, zobaczysz następujące dane wyjściowe.

W Next.js stwórzmy style globalne, które zostaną zastosowane na wszystkich stronach.

W tym przykładzie utworzymy styles.css, który będzie używany we wszystkich komponentach używających komponentu _app.js.

Zaktualizujmy projekt nextjs używany w rozdziale Wsparcie dla CSS .

Najpierw utwórz katalog stylów na poziomie głównym i dodaj plik styles.css w następujący sposób -

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Utwórz plik _app.js w katalogu stron

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij link First post.

Wiemy, że w Next.js generuje HTML dla strony zwanej renderowaniem wstępnym. Next.JS obsługuje dwa typy renderowania wstępnego.

• Static Generation- Ta metoda generuje stronę HTML w czasie kompilacji. Ten wstępnie renderowany kod HTML jest wysyłany przy każdym żądaniu. Ta metoda jest przydatna w przypadku witryn marketingowych, blogów, produktów e-commerce z listą witryn, pomocy, witryn z dokumentacją.

• Server Side Generation- Ta metoda generuje stronę HTML przy każdym żądaniu. Ta metoda jest odpowiednia, gdy zawartość strony HTML może się różnić w zależności od żądania.

Wstępne renderowanie na stronę

Next.JS pozwala ustawić metodę renderowania wstępnego dla każdej strony, na której większość stron jest generowana statycznie, a inne strony będą korzystać z renderowania po stronie serwera.

Generowanie statyczne bez danych

Generowanie statyczne można wykonać bez danych. W takim przypadku strony HTML będą gotowe bez konieczności wstępnego pobierania danych i rozpoczynania renderowania. Dane można pobrać później lub na żądanie. Technika ta pomaga w wyświetlaniu użytkownikowi interfejsu użytkownika bez żadnych danych, na wypadek gdyby dane wymagały czasu.

Generowanie statyczne z danymi

Generowanie statyczne można przeprowadzić z danymi, w którym to przypadku strony HTML nie będą gotowe, dopóki dane nie zostaną pobrane, ponieważ HTML może być zależny od danych. Każdy składnik ma specjalną metodęgetStaticProps które mogą być używane do pobierania danych i przekazywania danych jako rekwizytów strony, aby strona mogła renderować zgodnie z przekazanymi właściwościami.

Funkcja getStaticProps () działa w czasie kompilacji w środowisku produkcyjnym i dla każdego żądania w trybie deweloperskim.

Stwórzmy przykład, aby zademonstrować to samo.

W tym przykładzie utworzymy aktualizację strony index.js i first.js, aby serwer mógł pobierać dane.

Zaktualizujmy projekt nextjs używany w rozdziale Globalne wsparcie CSS .

Zaktualizuj plik index.js w katalogu pages, aby użyć metody getServerSideProps (). Ta metoda będzie wywoływana na żądanie.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Zaktualizuj plik first.js w katalogu pages, aby używał metody getStaticProps (). Ta metoda zostanie wywołana raz.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij link First post.

Next.js używa routera opartego na systemie plików. Ilekroć dodajemy jakąkolwiek stronę dopageskatalog, jest on automatycznie dostępny za pośrednictwem adresu URL. Oto zasady tego routera.

• Index Routes- Plik index.js obecny w folderze jest odwzorowywany na katalog główny. Na przykład -

  • pages / index.js mapuje na „/”.

  • pages / posts / index.js odwzorowuje na „/ posts”.

• Nested Routes- Dowolna struktura folderów zagnieżdżonych w katalogu stron, ponieważ adres URL routera automatycznie. Na przykład -

  • pages / settings / dashboard / about.js mapuje na „/ settings / dashboard / about”.

  • pages / posts / first.js mapuje na „/ posts / first”.

• Dynamic Routes- Możemy również użyć nazwanego parametru do dopasowania adresu URL. Użyj nawiasów do tego samego. Na przykład -

  • pages / posts / [id] .js odwzorowuje na „/ posts /: id”, gdzie możemy użyć adresu URL, takiego jak „/ posts / 1”.

  • pages / [user] /settings.js mapuje do „/ posts /: user / settings”, gdzie możemy użyć adresu URL, takiego jak „/ abc / settings”.

  • pages / posts / [... all] .js mapuje do „/ posts / *”, gdzie możemy użyć dowolnego adresu URL, takiego jak „/ posts / 2020 / jun /”.

Łączenie stron

Next.JS umożliwia linkowanie stron po stronie klienta za pomocą komponentu Link React. Posiada następujące właściwości -

• href- nazwa strony w katalogu stron. Na przykład/posts/first który odnosi się do first.js obecnego w katalogu pages / posts.

Stwórzmy przykład, aby zademonstrować to samo.

W tym przykładzie zaktualizujemy strony index.js i first.js, aby serwer mógł pobierać dane.

Zaktualizujmy projekt nextjs używany w rozdziale Globalne wsparcie CSS .

Zaktualizuj plik index.js w katalogu stron w następujący sposób.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij link First post.

W Next.js możemy dynamicznie tworzyć trasy. W tym przykładzie utworzymy strony w locie i ich routing.

• Step 1. Define [id].js file- [id] .js reprezentuje dynamiczną stronę, gdzie id będzie ścieżką względną. Zdefiniuj ten plik w katalogu pages / post.

• Step 2. Define lib/posts.js- posts.js reprezentuje identyfikatory i zawartość. Katalog lib ma zostać utworzony w katalogu głównym.

[id] .js

Zaktualizuj plik [id] .js za pomocą metody getStaticPaths (), która ustawia ścieżki i metodę getStaticProps (), aby pobrać zawartość na podstawie identyfikatora.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

posts.js zawiera getAllPostIds (), aby pobrać identyfikatory i getPostData (), aby pobrać odpowiednią zawartość.

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 / posty / jeden w przeglądarce, a zobaczysz następujące dane wyjściowe.

Otwórz localhost: 3000 / posts / two w przeglądarce, a zobaczysz następujący wynik.

W Next.js do tej pory używamy komponentu Link React do przechodzenia z jednej strony na drugą. Istnieje również programowy sposób osiągnięcia tego samego za pomocą komponentu Router. Generalnie komponent routera jest używany z tagami HTML.

Zaktualizuj plik index.js w katalogu stron w następujący sposób.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/posts/one')}>First Post</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij Pierwszy post, który nie jest linkiem, ale można go kliknąć.

W Next.js, płytki routing odnosi się do przechodzenia do tej samej strony, ale bez wywołań metod getServerSideProps, getStaticProps i getInitialProps.

Aby wykonać płytkie trasowanie, używamy routera z płytką flagą jako true. Zobacz poniższy przykład.

Zaktualizuj plik index.js w katalogu stron w następujący sposób.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a następnie kliknij łącze Załaduj ponownie, a zobaczysz następujące dane wyjściowe.

API Routes to sposób na utworzenie reszty API przy użyciu Next.js. Next.js mapuje dowolny plik obecny w/pages/apifolderu i będą traktowane jako punkt końcowy interfejsu API. Przykład funkcji API -

export default (req, res) => {
   ...
}

Poniżej przedstawiono kilka ważnych kwestii do rozważenia.

• req - req jest instancją http.IncomingMessage i służy do pobierania danych z żądania.

• res - res jest instancją http.ServerResponse i służy do wysyłania danych jako odpowiedzi.

Stwórzmy przykład, aby zademonstrować to samo.

W tym przykładzie utworzymy plik user.js w formacie pages/api informator.

Zaktualizujmy projekt nextjs używany w rozdziale Globalne wsparcie CSS .

Utwórz plik user.js w katalogu pages / api w następujący sposób.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'Robert' }))
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 / api / user w przeglądarce, a zobaczysz następujące dane wyjściowe.

{"name":"Robert"}

Trasy API w Next.JS mają wbudowane oprogramowanie pośredniczące, które pomaga w analizowaniu przychodzącego żądania.

Poniżej przedstawiono oprogramowanie pośrednie

• req.cookies- obiekt cookies zawiera pliki cookies wysłane na żądanie. Wartość domyślna to {}.

• req.query- obiekt zapytania zawiera ciąg zapytania. Wartość domyślna to {}.

• req.body- obiekt zapytania zawiera treść żądania przeanalizowaną przy użyciu parametru „content-type”. Wartość domyślna to null.

Stwórzmy przykład, aby zademonstrować to samo.

W tym przykładzie zamierzamy zaktualizować plik user.js w pages/api informator.

Zaktualizujmy projekt nextjs używany w rozdziale Trasy API .

Utwórz plik user.js w katalogu pages / api w następujący sposób.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ query: req.query }))
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz w przeglądarce http: // localhost: 3000 / api / user? Counter = 1, a zobaczysz następujące dane wyjściowe.

{"query":{"counter":"1"}}

res obiekt ma metody pomocnicze express.js, aby ułatwić programowanie w celu tworzenia usług.

Poniżej przedstawiono metody pomocnika odpowiedzi

• res.status(code)- Te metody ustawiają stan odpowiedzi. Przekazany kod musi mieć prawidłowy stan HTTP.

• req.json(json)- Ta metoda zwraca odpowiedź JSON. json musi być prawidłowym obiektem JSON.

• req.send(body)- Ta metoda wysyła odpowiedź HTTP. Odpowiedzią może być napis, obiekt lub bufor.

Stwórzmy przykład, aby zademonstrować to samo.

W tym przykładzie zamierzamy zaktualizować plik user.js w pages/api informator.

Zaktualizujmy projekt nextjs używany w rozdziale Trasy API .

Utwórz plik user.js w katalogu pages / api w następujący sposób.

export default (req, res) => {
   res.status(200).json({ name: 'Robert' });
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz http: // localhost: 3000 / api / user w przeglądarce, a zobaczysz następujące dane wyjściowe.

{ name: 'Robert' }

Next.js, ma execellent wsparcie dla maszynopisu. Poniżej znajduje się kilka kroków, aby włączyć maszynopis w projekcie.

Utwórz plik tsconfig.json

Utwórz plik tsconfig.json w katalogu głównym. Na początku trzymamy to puste. Teraz uruchom serwer.

Next.JS wykryje plik tsconfig.json i wyświetli następujący komunikat na konsoli.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

        npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

Zainstaluj maszynopis

Uruchom polecenie npm install, aby zainstalować skrypt maszynowy i powiązane biblioteki.

npm install --save-dev typescript @types/react @types/node
...

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

Otwórz plik tsconfig.json

Serwer NextJS zmodyfikował plik tsconfig.json.

{
   "compilerOptions": {
      "target": "es5",
      "lib": [
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve"
   },
   "exclude": [
      "node_modules"
   ],
   "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
   ]
}

Utwórz hello.ts

Utwórz hello.ts w katalogu pages / api, który będzie dla nas działał jako usługa odpoczynku.

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 / api / hello w przeglądarce, a zobaczysz następujące dane wyjściowe.

{"text":"Welcome to TutorialsPoint"}

Next.js, ma wsparcie dla publikowania zmiennych środowiskowych w węźle, które możemy wykorzystać do połączenia się z serwerem, bazą danych itp. W tym celu musimy stworzyć plik .env.local w katalogu głównym. Możemy również stworzyć .env.production.

Utwórz .env.local

Utwórz plik .env.local w katalogu głównym z następującą zawartością.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Utwórz plik env.js

Utwórz stronę o nazwie env.js z następującą zawartością w katalogu pages / posts, gdzie użyjemy zmiennych środowiskowych za pomocą process.env.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Teraz uruchom serwer.

Next.JS wykryje plik .env.local i wyświetli następujący komunikat na konsoli.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

Sprawdź wyjście

Otwórz localhost: 3000 / posts / env w przeglądarce, a zobaczysz następujące dane wyjściowe.

Do tej pory opracowaliśmy i uruchomiliśmy przykładową aplikację NEXT.JS w trybie deweloperskim, teraz wykonamy lokalnie gotowe do produkcji wdrożenie, wykonując następujące kroki.

• npm run build - Zbuduj gotową do produkcji, wysoce zoptymalizowaną wersję.

• npm run start - Uruchom serwer.

Kompilacja gotowa do produkcji nie zawiera map źródłowych i ponownego ładowania kodu na gorąco w porównaniu z trybem deweloperskim, ponieważ te funkcje są używane głównie do debugowania.

Przygotuj kompilację

Uruchom następujące polecenie, aby przygotować kompilację gotową do produkcji -.

npm run build

> [email protected] build \Node\nextjs
> next build

info  - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Uruchom serwer

Uruchom następujące polecenie, aby uruchomić serwer produkcyjny -.

npm run start

> [email protected] start \Node\nextjs
> next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

Sprawdź wyjście

Otwórz localhost: 3000 / api / user w przeglądarce, a zobaczysz następujące dane wyjściowe.

{"name":"Robert"}

NEXT.JS zapewnia CLI do uruchamiania, budowania i eksportowania aplikacji. Można go wywołać używając npx od npm 5.2.

Pomoc CLI

Aby uzyskać listę poleceń CLI i pomoc na ich temat, wpisz następujące polecenie.

npx next -h
   Usage
      $ next <command>

   Available commands
      build, start, export, dev, telemetry

   Options
      --version, -v   Version number
      --help, -h      Displays this message

   For more information run a command with the --help flag
      $ next build --help

Tworzenie kompilacji gotowej do produkcji

Wpisz następujące polecenie.

npx next build
info  - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Zbuduj i uruchom serwer deweloperski

Wpisz następujące polecenie.

npx next dev

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully

Uruchom serwer produkcyjny

Wpisz następujące polecenie.

npx next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000