Uygulamalarla Next.js ile Sunucu Taraflı Render (SSR)

Next.js Nedir ve Ne Amaçla Kullanılır

Yeni React-Next.js Projesi Başlatmak

npx create-next-app <proje-ismi>
cd react-ssr
npm run dev
netstat -ano | findstr :3000
tskill <portID>

SSR Dosya Mimarisinin İncelenmesi

import '../styles/globals.css'function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
import styles from '../styles/Home.module.css'
import styles from '../../styles/About.module.css';export default function About() {
return (
<div className={styles.About} >
<h1>About sayfası</h1>
</div>
)
}
.About{ text-align: center; }
import styles from '../../styles/Header.module.css';export default function Header() {
return (
<div className={styles.Header} >
Header
</div>
)
}
.Header{ height: 50px; background-color: chocolate; }
import styles from '../../styles/Footer.module.css';export default function Footer() {
return (
<div className={styles.Footer} >
@2020 ugurgelisken.com
</div>
)
}
.Footer{
height: 20px;
text-align: center;
font-size: 10px;
padding: 8px 4px 0px 4px;
background-color: darkgray;
color: black;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
import '../styles/globals.css'
import Header from '../layout/header/index'
import Footer from '../layout/footer/index'
function MyApp({ Component, pageProps }) {
return (
<>
<Header />
<Component {...pageProps} />
<Footer />
</>
)
}
export default MyApp
.Index{
padding: 10px;
background-color: rgb(248, 248, 248);
overflow: hidden;
height: calc(100vh - 90px);
}

404 Sayfası

import styles from '../styles/PageNotFound_404.module.css'export default function PageNotFound_404() {
return (
<div className={styles.PageNotFound_404} >
<h3>Sayfa Bulunamadı</h3>
<p>Ana sayfaya dönmek için <a href="/" >tıklayın.</a></p>
</div>
)
}
.PageNotFound_404{ text-align: center; padding-top: 20vh; }

Header Etiketlerini Düzenlemek

import Head from 'next/head'
import '../styles/globals.css'
import Head from 'next/head'
import Header from '../layout/header/index'
import Footer from '../layout/footer/index'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta charSet="utf-8" />
<title>Merhaba Next.js</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="React ve Next.js ile
SPA denemeleri" />
<meta name="keywords" content="react, spa, next.js, uğur,
gelişken" />
<meta name="author" content="Uğur GELİŞKEN" />
</Head>
<Header />
<Component {...pageProps} />
<Footer />
</>
)
}
export default MyApp
import styles from '../../styles/About.module.css'
import Head from 'next/head'
export default function About() {
return (
<>
<Head>
<title>About</title>
<meta name="description" content="about sayfası ile ilgili açıklama..." />
<meta name="keywords" content="about, react, next" />
</Head>
<div className={styles.About} >
<h1>About sayfası</h1>
</div>
</>
)
}
...
<Head>
<title>404 : Sayfa bulunamadı</title>
<meta name="robots" content="follow, noarchive, noindex" />
</Head>
...

Next.js’te Component İçinde Stil Kullanmak

export default function Index() {
return (
<>
<div className={styles.Index} >
<p>Merhaba Next.js!</p>
</div>
<style jsx>{`
p { color: black; }
div { background: white; }
@media (max-width: 600px) {
p{ color: white; }
div { background: black; }
}
`}</style>
</>
)
}

Sayfalar Arası Bağlantıları Kurmak

import Link from 'next/link'export default (props) => {
const { name, url } = {...props}
return (
<>
<Link href={url} >{name}</Link>
<style jxs>{`
a { margin: 4px; padding: 12px; background-color: white; border-radius: 8px; color: black; text-decoration: none; line-height: 3; }
a:hover { color: chocolate }
`}</style>
</>
)
}
import styles from '../../styles/Header.module.css'
import MenuButton from '../menu/button/'
export default function Header() {
const menuData = [
{ name: "Ana Sayfa", url: "/" },
{ name: "Hakkında", url: "about" },
{ name: "Ürünler", url: "products" },
{ name: "İletişim", url: "contact" },
{ name: "X", url: "x" }
]
return (
<div className={styles.Header} >
{ menuData.map(item => (
<MenuButton key={item.url} {...item} />
)) }
</div>
)
}

İç İçe ve Dinamik İsimli Bağlantılar

<Link href="/product/[id]" as="/product/product_1" >Ürün 1</Link>

Veri Çekme: getInitialProps()

import styles from '../../styles/Products.module.css'
import { useRouter } from 'next/router'
export default function Products( {items} ) {
const router = useRouter()
const goToProduct = item => {
window.product = item;
router.push({
pathname: '/product/[id]',
query: {id: item.id}
});
}

return (
<div className={styles.Products} >
{items.map(item => (
<div className={styles.ProductsBox} key={item.id}
onClick={() => goToProduct(item)} >
<h3>{item.volumeInfo.title}</h3>
<p>{item.volumeInfo.subtitle}</p>
</div>
))}
</div>
)
}
Products.getInitialProps = async () => {
const res = await fetch(`https://www.googleapis.com/books/v1/volumes?q=u%C4%9Furgeli%C5%9Fken`)
const data = await res.json()
return { ...data }
}
.Products{}
.ProductsBox{
border: 1px solid black;
border-radius: 4px;
background-color: blanchedalmond;
text-align: center;
cursor: pointer;
margin: 4px;
}
.ProductsBox:hover{ background-color: chocolate; color: white; }
const Product = () => {
var productData = {}
if (typeof window!== "undefined"
&& typeof window.product !== "undefined") {
productData = window.product;
window.product = null
}else{
return null
}
return (
<div style={{padding: '10px'}}>
<img style={{float: 'right'}} src={productData.volumeInfo.imageLinks.thumbnail} alt={productData.volumeInfo.title} />
<h1>{productData.volumeInfo.title}</h1>
<h4>{productData.volumeInfo.authors}</h4>
<span>Kategori: {productData.volumeInfo.categories}</span><br/>
<span>Sayfa Sayısı: {productData.volumeInfo.pageCount}</span><br/>
<span>Yayınlanma Tarihi: {productData.volumeInfo.publishedDate}</span><br/>
<span>Fiyat: <b>{productData.saleInfo.listPrice.amount} {productData.saleInfo.listPrice.currencyCode} </b></span><br/>
<button style={{margin:'4px'}} onClick={ () => { window.open( productData.accessInfo.webReaderLink, '_blank') } } >Oku</button>
<button style={{margin:'4px'}} onClick={ () => { window.open( productData.saleInfo.buyLink, '_blank') } } >Satın Al</button>
<p>{productData.volumeInfo.description}</p>
</div>
)
}
export default Product;

Uygulama Dağıtımı (Deployment)

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},

--

--

Full-stack Developer [ UI / UX | JAM Stack | ME(A,R,V)N | LAMP ], Author, Pro Gamer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store