Next.js - Hızlı Kılavuz

Next.js, sunucu tarafı oluşturma özelliğine sahip React Tabanlı çerçevedir. Çok hızlı ve SEO dostudur.

Next.js kullanarak, oldukça kolay bir şekilde sağlam tepki tabanlı uygulama oluşturabilir ve test edebilirsiniz. Next.js'nin temel özellikleri aşağıdadır.

• Hot Code Reload - Next.js sunucusu, değiştirilen dosyaları algılar ve otomatik olarak yeniden yükler.

• Automatic Routing- Yönlendirme için herhangi bir url yapılandırmanıza gerek yok. dosyalar sayfalar klasörüne yerleştirilmelidir. Tüm url'ler dosya sistemine eşlenecektir. Özelleştirme yapılabilir.

• Component specific styles - style-jsx, hem genel hem de bileşene özgü stiller için destek sağlar.

• Server side rendering - react bileşenleri sunucuda önceden oluşturulur, bu nedenle istemcide daha hızlı yüklenir.

• Node Ecosystem - Next.js, Node ekosistemi ile iyi tepki veren jellere sahiptir.

• Automatic code split- Next.js, ihtiyaç duydukları kitaplıklara sahip sayfaları oluşturur. Next.js, tek bir büyük javascript dosyası oluşturmak yerine, birden çok kaynak oluşturur. Bir sayfa yüklendiğinde, onunla sadece gerekli javascript sayfası yüklenir.

• Prefetch - Next.js, birden çok bileşeni bağlamak için kullanılan Bağlantı bileşeni sağlar ve sayfa kaynaklarını arka planda önceden getirmek için önceden getirme özelliğini destekler.

• Dynamic Components - Next.js JavaScript modüllerini ve React Bileşenlerini dinamik olarak içe aktarmaya izin verir.

• Export Static Site - Next.js, web uygulamanızdan tam statik siteyi dışa aktarmanıza izin verir.

• Built-in Typescript Support - Next.js, Typescripts'te yazılmıştır ve mükemmel Typescript desteği sağlar.

Next.js react tabanlı bir çerçeve olduğu için Node ortamını kullanıyoruz. Şimdi sahip olduğunuzdan emin olunNode.js ve npmsisteminize kurulur. Next.js'yi yüklemek için aşağıdaki komutu kullanabilirsiniz -

npm install next react react-dom

Next.js başarıyla yüklendikten sonra aşağıdaki çıktıyı gözlemleyebilirsiniz -

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

Şimdi bir node package.json oluşturalım -

npm init

Package.json oluştururken varsayılan değerleri seçin -

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)

Şimdi package.json'un komut dosyaları bölümünü Next.js komutlarını içerecek şekilde güncelleyin.

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

Sayfalar dizini oluşturun.

Nextjs klasöründe bir sayfalar klasörü oluşturun ve aşağıdaki içeriğe sahip bir index.js dosyası oluşturun.

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

export default HomePage

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

Next.js'de dosya sistemi yönlendirme özelliğini kullanarak sayfalar oluşturabilir ve aralarında gezinebiliriz. KullanacağızLink Bileşen, sayfalar arasında istemci tarafında gezinme sağlar.

Next.js'de, bir sayfa bir React Bileşenidir ve sayfalar dizininden dışa aktarılır. Her sayfa, dosya adına göre bir yol ile ilişkilendirilir. Örneğin

• pages/index.js '/' rotası ile bağlantılı.

• pages/posts/first.js '/ posts / ilk' rotası ile bağlantılıdır vb.

Environment Setup bölümünde oluşturulan nextjs projesini güncelleyelim .

Aşağıdaki içeriklerle içinde post dizini ve first.js oluşturun.

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

Ana sayfaya geri dönmek için Bağlantı Desteği ekleyin. First.js'yi aşağıdaki gibi güncelleyin -

import Link from 'next/link'

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

İlk sayfaya gitmek için ana sayfaya Bağlantı Desteği ekleyin. İndex.js'yi aşağıdaki gibi güncelleyin -

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk Bağlantıya tıklayın ve aşağıdaki çıktıyı göreceksiniz.

Next.js'de, resimler gibi statik sayfaları, onları yerleştirerek çok kolay bir şekilde sunabiliriz. public, üst düzey bir dizin. Bu dosyalara, şu sayfalardaki gibi benzer şekilde başvurabiliriz:pages dizin.

Next.js'de, bir sayfa bir React Bileşenidir ve sayfalar dizininden dışa aktarılır. Her sayfa, dosya adına göre bir yol ile ilişkilendirilir.

Sayfalar bölümünde kullanılan nextjs projesini güncelleyelim .

Genel dizin oluşturun ve içine herhangi bir resim yerleştirin. Logo.png, TutorialsPoint Logo resmini aldık.

First.js'yi aşağıdaki gibi güncelleyin -

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

Burada index.js dosyasında logo.png'ye bir referans ekledik.

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

Genel dizin, SEO amaçlı olması durumunda da yararlıdır. Robot.txt, Google Site doğrulaması veya web uygulamasındaki diğer statik varlıklar için kullanılabilir.

Next.js'de, her bir tepki sayfasının baş bölümünü çok kolay bir şekilde değiştirebiliriz. <Head> dahili olan reaksiyon bileşeni.

Sayfalar bölümünde kullanılan nextjs projesini güncelleyelim .

İndex.js'yi aşağıdaki gibi güncelleyin -

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

First.js'yi aşağıdaki gibi güncelleyin -

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

Burada index.js dosyasında logo.png'ye bir referans ekledik.

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk Sayfa bağlantısını tıklayın ve İlk Gönderi sayfasında değiştirilen başlığı da doğrulayın.

Next.js'de, styled-jsx adlı inbuild css-in-js kitaplığını kullanabiliriz. Bir react bileşeni içinde css yazılmasına izin verir ve bu stillerin kapsamı bileşene göre belirlenir.

Bu örnekte, diğer bileşenleri içererek biçimlendirmek için kullanılacak bir Konteyner nesnesi oluşturacağız.

Meta Data bölümünde kullanılan nextjs projesini güncelleyelim .

Önce kök düzeyinde bir Bileşenler dizini oluşturun ve aşağıdaki gibi bir container.module.css dosyası ekleyin -

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

Bileşenler dizininde container.js dosyası oluşturun

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

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

export default Container

Şimdi first.js'de Kapsayıcı bileşenini kullanın.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve ilk gönderiye gidin, aşağıdaki çıktıyı göreceksiniz.

Next.js'de, tüm sayfalara uygulanacak global stiller oluşturalım.

Bu örnekte, _app.js bileşenini kullanarak tüm bileşenlerde kullanılacak bir styles.css oluşturacağız.

CSS Desteği bölümünde kullanılan nextjs projesini güncelleyelim .

Önce kök seviyesinde bir stil dizini oluşturun ve aşağıdaki gibi bir dosya styles.css ekleyin -

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

Sayfalar dizininde _app.js dosyası oluşturun

import '../styles/styles.css'

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk gönderi bağlantısına tıklayın.

Next.js'de, ön işleme adı verilen bir sayfa için HTML oluşturduğunu biliyoruz. Next.JS, iki tür ön görüntülemeyi destekler.

• Static Generation- Bu yöntem, derleme zamanında HTML sayfasını oluşturur. Bu önceden oluşturulmuş HTML, her istekte gönderilir. Bu yöntem pazarlama web siteleri, bloglar, web siteleri, yardımlar, dokümantasyon web sitelerini listeleyen e-ticaret ürünleri için kullanışlıdır.

• Server Side Generation- Bu yöntem, her istekte HTML sayfası oluşturur. Bu yöntem, bir html sayfası içeriği her isteğe göre değişebildiği zaman uygundur.

Sayfa Başına Ön İşleme

Next.JS, sayfaların çoğunun statik oluşturmayı takip ettiği ve diğer sayfaların sunucu tarafı oluşturmayı kullanacağı her sayfa için ön işleme yönteminin ayarlanmasına izin verir.

Veri Olmadan Statik Üretim

Statik oluşturma, veri olmadan yapılabilir; bu durumda, HTML sayfaları, verileri önceden getirmeye ve ardından oluşturmaya gerek kalmadan hazır olacaktır. Veriler daha sonra veya istek üzerine getirilebilir. Bu teknik, verilerin gelmesi zaman alırsa kullanıcıya herhangi bir veri olmadan bir Kullanıcı Arayüzü göstermeye yardımcı olur.

Verilerle Statik Üretim

Statik oluşturma, verilerle yapılabilir; bu durumda HTML sayfaları, veriler alınana kadar hazır olmayacaktır çünkü HTML verilere bağlı olabilir. Her bileşenin özel bir yöntemi vardırgetStaticProps Bu, verileri almak ve verileri sayfanın bir parçası olarak iletmek için kullanılabilir, böylece sayfa, aktarılan nesnelere uygunluklar oluşturabilir.

getStaticProps () işlevi üretimde derleme zamanında çalışır ve geliştirme modunda her istek için çalışır.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, bir sunucunun veri alması için bir güncelleme index.js ve first.js sayfası oluşturacağız.

Global CSS Desteği bölümünde kullanılan nextjs projesini güncelleyelim .

GetServerSideProps () yöntemini kullanmak için sayfalar dizinindeki index.js dosyasını güncelleyin. Bu yöntem istek başına çağrılacaktır.

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

GetStaticProps () yöntemini kullanmak için sayfalar dizinindeki first.js dosyasını güncelleyin. Bu yöntem bir kez çağrılacaktır.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk gönderi bağlantısına tıklayın.

Next.js dosya sistemi tabanlı yönlendirici kullanır. Ne zaman herhangi bir sayfa eklediğimizdepagesdizin, url aracılığıyla otomatik olarak kullanılabilir. Bu yönlendiricinin kuralları aşağıdadır.

• Index Routes- Bir klasörde bulunan bir index.js dosyası, dizinin köküyle eşleşir. Örneğin -

  • pages / index.js, "/" ile eşleşir.

  • page / posts / index.js, '/ posts' ile eşleşir.

• Nested Routes- Sayfalar dizinindeki herhangi bir iç içe klasör yapısı, çünkü yönlendirici URL'si otomatik olarak. Örneğin -

  • pages / settings / dashboard / about.js, "/ settings / dashboard / about" ile eşleşir.

  • page / posts / first.js, "/ posts / first" ile eşleşir.

• Dynamic Routes- URL ile eşleşmek için adlandırılmış parametreyi de kullanabiliriz. Aynısı için parantez kullanın. Örneğin -

  • pages / posts / [id] .js, '/ posts / 1' gibi URL'yi kullanabileceğimiz '/ posts /: id' ile eşleşir.

  • sayfalar / [kullanıcı] /settings.js, '/ abc / settings' gibi URL'yi kullanabileceğimiz '/ posts /: kullanıcı / ayarlar' ile eşleşir.

  • pages / posts / [... all] .js, '/ posts / 2020 / jun /' gibi herhangi bir URL'yi kullanabileceğimiz '/ posts / *' ile eşleşir.

Sayfa Bağlantısı

Next.JS, Link react bileşenini kullanarak istemci tarafındaki sayfaları bağlamayı sağlar. Aşağıdaki özelliklere sahiptir -

• href- sayfalar dizinindeki sayfanın adı. Örneğin/posts/first bu, pages / posts dizininde bulunan first.js'yi ifade eder.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, verileri almak üzere bir sunucunun isabet etmesini sağlamak için index.js ve first.js sayfasını güncelleyeceğiz.

Global CSS Desteği bölümünde kullanılan nextjs projesini güncelleyelim .

İndex.js dosyasını aşağıdaki gibi sayfalar dizininde güncelleyin.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk gönderi bağlantısına tıklayın.

Next.js'de dinamik olarak rotalar oluşturabiliriz. Bu örnekte, anında sayfalar ve bunların yönlendirmelerini oluşturacağız.

• Step 1. Define [id].js file- [id] .js, id'nin göreli yol olacağı dinamik sayfayı temsil eder. Bu dosyayı pages / post dizininde tanımlayın.

• Step 2. Define lib/posts.js- posts.js, kimlikleri ve içerikleri temsil eder. lib dizini kök dizinde oluşturulacak.

[kimlik] .js

[İd] .js dosyasını, yolları ayarlayan getStaticPaths () yöntemiyle güncelleyin ve içeriği id'ye göre almak için getStaticProps () yöntemini kullanın.

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, kimlikleri almak için getAllPostIds () ve karşılık gelen içerikleri almak için getPostData () içerir.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000 / posts / birini açın ve aşağıdaki çıktıyı göreceksiniz.

Bir tarayıcıda localhost: 3000 / posts / iki açın ve aşağıdaki çıktıyı göreceksiniz.

Next.js'de, şimdiye kadar bir sayfadan diğerine gitmek için Link react bileşenini kullanıyoruz. Yönlendirici bileşenini kullanarak aynı şeyi başarmanın programlı bir yolu da vardır. Yönlendirici bileşeni genellikle html etiketleriyle birlikte kullanılır.

İndex.js dosyasını aşağıdaki gibi sayfalar dizininde güncelleyin.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

Bağlantı olmayan ancak tıklanabilir olan İlk gönderiye tıklayın.

Next.js'de sığ yönlendirme, aynı sayfaya gitmeyi ifade eder, ancak getServerSideProps, getStaticProps ve getInitialProps yöntemlerine çağrı yapılmaz.

Sığ yönlendirme yapmak için, doğru olarak sığ bayraklı Yönlendirici kullanıyoruz. Aşağıdaki örneğe bakın.

İndex.js dosyasını aşağıdaki gibi sayfalar dizininde güncelleyin.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve ardından Yeniden yükle bağlantısına tıklayın ve aşağıdaki çıktıyı göreceksiniz.

API Routes, Next.js kullanarak rest API oluşturmanın bir yoludur. Next.js, içinde bulunan herhangi bir dosyayı eşler/pages/apiklasör ve API uç noktası olarak değerlendirilecektir. API işlevine bir örnek -

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

Aşağıda dikkate alınması gereken bazı önemli noktalar verilmiştir.

• req - req, http.IncomingMessage'ın bir örneğidir ve istekten veri almak için kullanılır.

• res - res, http.ServerResponse'nin bir örneğidir ve verileri yanıt olarak göndermek için kullanılır.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, içinde bir user.js oluşturacağız. pages/api dizin.

Global CSS Desteği bölümünde kullanılan nextjs projesini güncelleyelim .

Aşağıdaki gibi pages / api dizininde user.js dosyası oluşturun.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000 / api / user açın ve aşağıdaki çıktıyı göreceksiniz.

{"name":"Robert"}

Next.JS'deki API Routes, gelen isteği ayrıştırmaya yardımcı olan yerleşik ara yazılımlara sahiptir.

Aşağıdakiler ara yazılımlardır

• req.cookies- tanımlama bilgileri nesnesi, istek tarafından gönderilen tanımlama bilgilerini içerir. Varsayılan değer {}.

• req.query- sorgu nesnesi sorgu dizesini içerir. Varsayılan değer {}.

• req.body- sorgu nesnesi, 'içerik türü' kullanılarak ayrıştırılan istek gövdesini içerir. Varsayılan değer boştur.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, bir user.js'yi güncelleyeceğiz. pages/api dizin.

API Routes bölümünde kullanılan nextjs projesini güncelleyelim .

Aşağıdaki gibi pages / api dizininde user.js dosyası oluşturun.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda http: // localhost: 3000 / api / user? Counter = 1 açın ve aşağıdaki çıktıyı göreceksiniz.

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

res nesne, hizmetleri oluşturmak için geliştirmeyi kolaylaştırmak için yardımcı yöntemler gibi express.js'ye sahiptir.

Yanıt yardımcı yöntemleri aşağıdadır

• res.status(code)- Bu yöntemler yanıtın durumunu ayarlar. Aktarılan kod, geçerli bir HTTP durumu olmalıdır.

• req.json(json)- Bu yöntem bir JSON yanıtı döndürür. iletilen json geçerli bir JSON nesnesi olmalıdır.

• req.send(body)- Bu yöntemler bir HTTP yanıtı gönderir. Yanıt, dizgi, nesne veya Tampon olabilir.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, bir user.js'yi güncelleyeceğiz. pages/api dizin.

API Routes bölümünde kullanılan nextjs projesini güncelleyelim .

Aşağıdaki gibi pages / api dizininde user.js dosyası oluşturun.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda http: // localhost: 3000 / api / user açın ve aşağıdaki çıktıyı göreceksiniz.

{ name: 'Robert' }

Next.js, typcript için execellent desteğine sahiptir. Aşağıda, projede typcript'i etkinleştirmenin birkaç adımı vardır.

Tsconfig.json oluştur

Kök dizinde tsconfig.json oluşturun. Başlangıçta boş tutuyoruz. Şimdi sunucuyu başlatın.

Sonraki. JS, tsconfig.json dosyasını algılayacak ve konsolda aşağıdaki mesajı gösterecektir.

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

Tipleri yükle

TypeScript ve ilgili kitaplıkları yüklemek için npm install komutunu çalıştırın.

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Tsconfig.json dosyasını açın

NextJS sunucusu tsconfig.json dosyasını değiştirdi.

{
   "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"
   ]
}

Merhaba.ts oluşturun

Pages / api dizininde bizim için bir dinlenme hizmeti olarak hareket edecek merhaba.ts oluşturun.

import { NextApiRequest, NextApiResponse } from 'next'

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000 / api / merhaba açın ve aşağıdaki çıktıyı göreceksiniz.

{"text":"Welcome to TutorialsPoint"}

Next.js, sunucuya, veritabanına vb. Bağlanırken kullanabileceğimiz düğümde ortam değişkenlerini yayınlama desteğine sahiptir. Bunun için kök dizinde .env.local dosyası oluşturmamız gerekir. Ayrıca .env.production yaratabiliriz.

.Env.local oluşturun

Aşağıdaki içeriğe sahip kök dizinde .env.local oluşturun.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Env.js oluştur

Process.env kullanarak ortam değişkenlerini kullanacağımız page / posts dizininde aşağıdaki içeriğe sahip env.js adlı bir sayfa oluşturun.

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

Şimdi sunucuyu başlatın.

Ardından JS, .env.local dosyasını algılar ve konsolda follwing mesajını gösterir.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000 / posts / env'i açın ve aşağıdaki çıktıyı göreceksiniz.

Şimdiye kadar geliştirme modunda örnek NEXT.JS uygulamasını geliştirdik ve çalıştırdık, şimdi aşağıdaki adımları kullanarak üretime hazır dağıtımı yerel olarak yapacağız.

• npm run build - Üretime hazır, yüksek düzeyde optimize edilmiş bir yapı oluşturun.

• npm run start - Sunucuyu başlatın.

Üretime hazır derleme, geliştirme moduna kıyasla kaynak eşlemlerinden ve sıcak kod yeniden yüklemesinden yoksundur çünkü bu özellikler öncelikle hata ayıklamada kullanılır.

Derlemeyi Hazırla

Üretime hazır derlemeyi hazırlamak için aşağıdaki komutu çalıştırın -.

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)

Sunucuyu başlatın

Üretim sunucusunu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000 / api / user açın ve aşağıdaki çıktıyı göreceksiniz.

{"name":"Robert"}

NEXT.JS, uygulamayı başlatmak, oluşturmak ve dışa aktarmak için bir CLI sağlar. Npm 5.2'den sonra gelen npx kullanılarak çağrılabilir.

CLI Yardımı

CLI komutlarının listesini almak ve bunlarla ilgili yardım almak için aşağıdaki komutu yazın.

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

Üretime Hazır Oluşturun

Aşağıdaki komutu yazın.

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)

Geliştirme Sunucusunu Oluşturun ve Başlatın

Aşağıdaki komutu yazın.

npx next dev

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

Üretim Sunucusunu başlatın

Aşağıdaki komutu yazın.

npx next start

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