Next.js - Panduan Cepat

Next.js adalah framework Berbasis React dengan kemampuan rendering sisi server. Ini sangat cepat dan ramah SEO.

Menggunakan Next.js, Anda dapat membuat aplikasi berbasis react yang kuat dengan mudah dan mengujinya. Berikut adalah fitur utama Next.js.

• Hot Code Reload - Server Next.js mendeteksi file yang diubah dan memuatnya kembali secara otomatis.

• Automatic Routing- Tidak perlu mengkonfigurasi url apa pun untuk perutean. file akan ditempatkan di folder halaman. Semua url akan dipetakan ke sistem file. Kustomisasi bisa dilakukan.

• Component specific styles - styled-jsx memberikan dukungan untuk global serta gaya khusus komponen.

• Server side rendering - react komponen yang prerender di server sehingga memuat lebih cepat di klien.

• Node Ecosystem - Next.js sedang mereaksikan gel berbasis baik dengan ekosistem Node.

• Automatic code split- Next.js membuat halaman dengan pustaka yang mereka butuhkan. Next.js alih-alih membuat satu file javascript besar, membuat banyak sumber daya. Saat halaman dimuat, hanya halaman javascript yang diperlukan yang dimuat dengannya.

• Prefetch - Next.js menyediakan komponen Link yang digunakan untuk menghubungkan beberapa komponen yang mendukung properti prefetch untuk mengambil sumber daya halaman di latar belakang.

• Dynamic Components - Next.js memungkinkan untuk mengimpor modul JavaScript dan Komponen React secara dinamis.

• Export Static Site - Next.js memungkinkan untuk mengekspor situs statis penuh dari aplikasi web Anda.

• Built-in Typescript Support - Next.js ditulis dalam Kriptografi dan memberikan dukungan Skrip Ketikan yang sangat baik.

Karena Next.js adalah kerangka kerja berbasis reaksi, kami menggunakan lingkungan Node. Sekarang pastikan Anda punyaNode.js dan npmdiinstal di sistem Anda. Anda dapat menggunakan perintah berikut untuk menginstal Next.js -

npm install next react react-dom

Anda dapat mengamati output berikut setelah Next.js berhasil diinstal -

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

Sekarang, mari buat node package.json -

npm init

Pilih nilai default saat membuat 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)

Sekarang perbarui bagian skrip package.json untuk menyertakan perintah 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"
}

Buat direktori halaman.

Buat folder halaman dalam folder nextjs dan buat file index.js dengan konten berikut.

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

export default HomePage

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Di Next.js, kita dapat membuat halaman dan menavigasi di antaranya menggunakan fitur perutean sistem file. Kami akan menggunakanLink komponen untuk memiliki navigasi sisi klien antar halaman.

Di Next.js, halaman adalah Komponen React dan diekspor dari direktori halaman. Setiap halaman dikaitkan dengan rute berdasarkan nama filenya. Sebagai contoh

• pages/index.js ditautkan dengan rute '/'.

• pages/posts/first.js ditautkan dengan rute '/ posts / first' dan seterusnya.

Mari perbarui proyek nextjs yang dibuat di bab Pengaturan Lingkungan .

Buat direktori posting dan first.js di dalamnya dengan konten berikut.

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

Tambahkan Dukungan Tautan untuk kembali ke halaman Beranda. Perbarui first.js sebagai berikut -

import Link from 'next/link'

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

Tambahkan Dukungan Tautan ke halaman beranda untuk menavigasi ke halaman pertama. Perbarui index.js sebagai berikut -

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik First Link dan Anda akan melihat output berikut.

Di Next.js, kita dapat menyajikan halaman statis seperti gambar dengan sangat mudah dengan memasukkannya public, direktori tingkat atas. Kita dapat merujuk file-file ini dengan cara yang sama seperti halaman dipages direktori.

Di Next.js, halaman adalah Komponen React dan diekspor dari direktori halaman. Setiap halaman dikaitkan dengan rute berdasarkan nama filenya.

Mari perbarui proyek nextjs yang digunakan dalam bab Pages .

Buat direktori publik dan letakkan gambar apa pun di dalamnya. Kami telah mengambil logoo.png, gambar Logo TutorialsPoint.

Perbarui first.js sebagai berikut -

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" />
      </>	  
   )
}

Di sini kami telah menambahkan referensi ke logo.png di file index.js.

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

direktori publik juga berguna dalam hal tujuan SEO. Ini dapat digunakan untuk robot.txt, verifikasi Situs Google atau aset statis lainnya di aplikasi web.

Di Next.js, kita dapat melayani modifikasi bagian head dari setiap halaman react dengan sangat mudah dengan bantuan <Head> komponen reaksi yang ada di dalamnya.

Mari perbarui proyek nextjs yang digunakan dalam bab Pages .

Perbarui index.js sebagai berikut -

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

Perbarui first.js sebagai berikut -

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>
      </>	  
   )
}

Di sini kami telah menambahkan referensi ke logo.png di file index.js.

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik link Halaman Pertama dan verifikasi judul yang diubah di halaman Posting Pertama juga.

Di Next.js, kita bisa menggunakan library css-in-js inbuild bernama styled-jsx. Ini memungkinkan untuk menulis css dalam komponen react dan gaya ini akan dicakup ke komponen.

Dalam contoh ini, kita akan membuat objek Container yang akan digunakan untuk mengatur gaya komponen lain dengan memuatnya.

Mari perbarui proyek nextjs yang digunakan di bab Meta Data .

Pertama buat direktori Komponen di tingkat root dan tambahkan file container.module.css sebagai berikut -

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

Buat file container.js di direktori Komponen

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

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

export default Container

Sekarang gunakan komponen Container di 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>
      </>	  
   )
}

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan masuk ke postingan pertama, Anda akan melihat output berikut.

Di Next.js, Mari buat gaya global yang akan diterapkan di semua halaman.

Dalam contoh ini, kita akan membuat styles.css yang akan digunakan pada semua komponen menggunakan komponen _app.js.

Mari perbarui proyek nextjs yang digunakan dalam bab Dukungan CSS .

Pertama buat direktori gaya di tingkat root dan tambahkan file styles.css sebagai berikut -

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;
}

Buat file _app.js di direktori halaman

import '../styles/styles.css'

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik link posting pertama.

Di Next.js, kita tahu itu menghasilkan HTML untuk halaman yang disebut pra-rendering. Next.JS mendukung dua jenis pra-rendering.

• Static Generation- Metode ini menghasilkan halaman HTML pada waktu pembuatan. HTML pra-render ini dikirim pada setiap permintaan. Metode ini berguna untuk memasarkan situs web, blog, daftar produk e-commerce, situs web bantuan, situs dokumentasi.

• Server Side Generation- Metode ini menghasilkan halaman HTML pada setiap permintaan. Metode ini cocok jika konten halaman html dapat bervariasi dengan setiap permintaan.

Per Halaman Pra-rendering

Next.JS memungkinkan untuk mengatur metode pra-rendering untuk setiap halaman di mana sebagian besar halaman mengikuti pembuatan statis dan halaman lain akan menggunakan rendering sisi server.

Generasi Statis Tanpa Data

Pembuatan statis dapat dilakukan tanpa data dalam hal ini, halaman HTML akan siap tanpa perlu mengambil data terlebih dahulu dan kemudian mulai merender. Data dapat diambil nanti atau atas permintaan. Teknik ini membantu dalam menampilkan User Interface tanpa data apa pun jika data membutuhkan waktu untuk datang.

Generasi Statis Dengan Data

Pembuatan statis dapat dilakukan dengan data dalam hal ini, halaman HTML tidak akan siap sampai data diambil, karena HTML mungkin bergantung pada data. Setiap komponen memiliki metode khususgetStaticProps yang dapat digunakan untuk mengambil data dan meneruskan data sebagai properti halaman sehingga halaman dapat merender sesuai dengan properti yang diteruskan.

Fungsi getStaticProps () berjalan pada waktu build dalam produksi dan berjalan untuk setiap permintaan dalam mode dev.

Mari buat contoh untuk menunjukkan hal yang sama.

Dalam contoh ini, kita akan membuat halaman update index.js dan first.js untuk membuat klik server untuk mendapatkan data.

Mari perbarui proyek nextjs yang digunakan dalam bab Dukungan CSS Global .

Perbarui file index.js di direktori halaman untuk menggunakan metode getServerSideProps (). Metode ini akan dipanggil sesuai permintaan.

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

Perbarui file first.js di direktori halaman untuk menggunakan metode getStaticProps (). Metode ini akan dipanggil sekali.

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 }
   }
}

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik link posting pertama.

Next.js menggunakan router berbasis sistem file. Kapanpun kita menambahkan halaman apapun kepagesdirektori, secara otomatis tersedia melalui url. Berikut adalah aturan dari router ini.

• Index Routes- File index.js yang ada di folder memetakan ke root direktori. Misalnya -

  • pages / index.js dipetakan ke '/'.

  • pages / posts / index.js dipetakan ke '/ posts'.

• Nested Routes- Setiap struktur folder bersarang di direktori halaman karena url router secara otomatis. Misalnya -

  • halaman / pengaturan / dasbor / about.js memetakan ke '/ pengaturan / dasbor / tentang'.

  • pages / posts / first.js memetakan ke '/ posts / first'.

• Dynamic Routes- Kita bisa menggunakan parameter bernama juga untuk mencocokkan url. Gunakan tanda kurung untuk hal yang sama. Misalnya -

  • pages / posts / [id] .js memetakan ke '/ posts /: id' di mana kita dapat menggunakan URL seperti '/ posts / 1'.

  • pages / [user] /settings.js memetakan ke '/ posts /: user / settings' di mana kita dapat menggunakan URL seperti '/ abc / settings'.

  • pages / posts / [... all] .js memetakan ke '/ posts / *' di mana kita dapat menggunakan URL seperti '/ posts / 2020 / jun /'.

Menghubungkan Halaman

Next.JS memungkinkan untuk menautkan halaman di sisi klien menggunakan komponen Link react. Ini memiliki properti berikut -

• href- nama halaman dalam direktori halaman. Sebagai contoh/posts/first yang mengacu pada first.js yang ada di direktori halaman / posting.

Mari buat contoh untuk menunjukkan hal yang sama.

Dalam contoh ini, kami akan memperbarui halaman index.js dan first.js untuk membuat server terkena untuk mendapatkan data.

Mari perbarui proyek nextjs yang digunakan dalam bab Dukungan CSS Global .

Perbarui file index.js di direktori halaman sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik link posting pertama.

Di Next.js, kita bisa membuat rute secara dinamis. Dalam contoh ini, kita akan membuat halaman dengan cepat dan peruteannya.

• Step 1. Define [id].js file- [id] .js mewakili halaman dinamis di mana id akan menjadi jalur relatif. Tentukan file ini di halaman / direktori posting.

• Step 2. Define lib/posts.js- posts.js mewakili id ​​dan isinya. direktori lib harus dibuat di direktori root.

[id] .js

Perbarui file [id] .js dengan metode getStaticPaths () yang menyetel jalur dan metode getStaticProps () untuk mendapatkan konten berdasarkan id.

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 berisi getAllPostIds () untuk mendapatkan id dan getPostData () untuk mendapatkan konten yang sesuai.

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'
      }
   }
];
}

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 / posts / one di browser dan Anda akan melihat output berikut.

Buka localhost: 3000 / posts / two di browser dan Anda akan melihat output berikut.

Di Next.js, sejauh ini kami menggunakan komponen Link react untuk menavigasi dari satu halaman ke halaman lain. Ada cara terprogram juga untuk mencapai hal yang sama menggunakan komponen Router. Umumnya komponen Router digunakan dengan tag html.

Perbarui file index.js di direktori halaman sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik pada Posting pertama yang bukan merupakan tautan tetapi dapat diklik.

Di Next.js, perutean dangkal mengacu pada navigasi ke halaman yang sama tetapi tidak ada panggilan ke metode getServerSideProps, getStaticProps, dan getInitialProps.

Untuk melakukan routing yang dangkal, kami menggunakan Router dengan flag shallow sebagai true. Lihat contoh di bawah ini.

Perbarui file index.js di direktori halaman sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser lalu klik Reload link dan Anda akan melihat output berikut.

Rute API adalah cara untuk membuat API istirahat menggunakan Next.js. Next.js memetakan file apa pun yang ada di/pages/apifolder dan akan diperlakukan sebagai titik akhir API. Contoh fungsi API -

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

Berikut adalah beberapa hal penting yang perlu diperhatikan.

• req - req adalah turunan dari http.IncomingMessage dan digunakan untuk mendapatkan data dari permintaan.

• res - res adalah turunan dari http.ServerResponse dan digunakan untuk mengirim data sebagai respons.

Mari buat contoh untuk menunjukkan hal yang sama.

Dalam contoh ini, kita akan membuat user.js di pages/api direktori.

Mari perbarui proyek nextjs yang digunakan dalam bab Dukungan CSS Global .

Buat file user.js di direktori pages / api sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 / api / user di browser dan Anda akan melihat output berikut.

{"name":"Robert"}

Rute API di Next.JS memiliki middlewares built-in yang membantu dalam mengurai permintaan yang masuk.

Berikut ini adalah middlewares

• req.cookies- Objek cookie berisi cookie yang dikirim oleh permintaan. Nilai defaultnya adalah {}.

• req.query- objek kueri berisi string kueri. Nilai defaultnya adalah {}.

• req.body- objek kueri berisi isi permintaan yang diurai menggunakan 'tipe konten'. Nilai defaultnya adalah null.

Mari buat contoh untuk menunjukkan hal yang sama.

Dalam contoh ini, kami akan memperbarui user.js di pages/api direktori.

Mari perbarui proyek nextjs yang digunakan dalam bab Rute API .

Buat file user.js di direktori pages / api sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka http: // localhost: 3000 / api / user? Counter = 1 di browser dan Anda akan melihat output berikut.

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

res objek memiliki express.js seperti metode pembantu untuk memudahkan pengembangan untuk membuat layanan.

Berikut ini adalah metode pembantu respon

• res.status(code)- Metode ini mengatur status tanggapan. Kode yang diteruskan harus berstatus HTTP yang valid.

• req.json(json)- Metode ini mengembalikan respons JSON. json yang dikirimkan harus merupakan objek JSON yang valid.

• req.send(body)- Metode ini mengirimkan respons HTTP. Respon bisa berupa string, object atau Buffer.

Mari buat contoh untuk menunjukkan hal yang sama.

Dalam contoh ini, kami akan memperbarui user.js di pages/api direktori.

Mari perbarui proyek nextjs yang digunakan dalam bab Rute API .

Buat file user.js di direktori pages / api sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka http: // localhost: 3000 / api / user di browser dan Anda akan melihat output berikut.

{ name: 'Robert' }

Next.js, memiliki dukungan yang sangat baik untuk skrip ketikan. Berikut adalah beberapa langkah untuk mengaktifkan skrip ketikan dalam proyek.

Buat tsconfig.json

Buat tsconfig.json di direktori root. Kami mengosongkannya pada awalnya. Sekarang mulai server.

Next.JS akan mendeteksi tsconfig.json dan menampilkan pesan follwing di konsol.

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).
...

Pasang naskah ketikan

Jalankan perintah npm install untuk menginstal skrip tipe dan pustaka terkait.

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
...

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Buka tsconfig.json

Server NextJS telah memodifikasi 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"
   ]
}

Buat halo

Buat hello.ts di direktori pages / api yang akan bertindak sebagai layanan istirahat untuk kita.

import { NextApiRequest, NextApiResponse } from 'next'

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 / api / hello di browser dan Anda akan melihat output berikut.

{"text":"Welcome to TutorialsPoint"}

Next.js, memiliki dukungan untuk mempublikasikan variabel lingkungan di node yang dapat kita gunakan untuk menghubungkan ke server, database dll. Untuk ini, kita perlu membuat file .env.local di direktori root. Kami juga dapat membuat .env.production.

Buat .env.local

Buat .env.local di direktori root dengan konten berikut.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Buat env.js

Buat halaman bernama env.js dengan konten berikut di direktori pages / posts di mana kita akan menggunakan variabel lingkungan menggunakan 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
      }
   }
}

Sekarang mulai server.

Next.JS akan mendeteksi .env.local dan menampilkan pesan follwing di konsol.

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

Verifikasi Output

Buka localhost: 3000 / posts / env di browser dan Anda akan melihat output berikut.

Sejauh ini kami telah mengembangkan dan menjalankan contoh aplikasi NEXT.JS dalam mode pengembang, sekarang kami akan melakukan penerapan siap produksi secara lokal menggunakan langkah-langkah berikut.

• npm run build - Bangun produksi siap, build yang sangat dioptimalkan.

• npm run start - Mulai server.

Versi siap produksi tidak memiliki peta sumber dan pemuatan ulang kode panas dibandingkan dengan mode pengembang karena fitur tersebut terutama digunakan dalam proses debug.

Siapkan Build

Jalankan perintah berikut untuk menyiapkan build siap produksi -.

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)

Mulai server

Jalankan perintah berikut untuk memulai server produksi -.

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

Verifikasi Output

Buka localhost: 3000 / api / user di browser dan Anda akan melihat output berikut.

{"name":"Robert"}

NEXT.JS menyediakan CLI untuk memulai, membangun, dan mengekspor aplikasi. Itu bisa dipanggil menggunakan npx yang datang npm 5.2 dan seterusnya.

Bantuan CLI

Untuk mendapatkan daftar perintah CLI dan bantuannya, ketik perintah berikut.

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

Bangun Produksi Siap Bangun

Ketik perintah berikut.

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)

Bangun dan Mulai Server Pengembangan

Ketik perintah berikut.

npx next dev

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

Mulai Server produksi

Ketik perintah berikut.

npx next start

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