Part 1 : Next.js ครั้งแรก

Pozterz
Pozterz
Aug 24, 2017 · 3 min read

อยู่มาวันนึงก็โดนแนะนำให้มาลองเล่น Next.js ดู เลยเอาที่เรียนมาแชร์และกัน xD

เค้าบอกว่า . . .

Next.js is a minimalistic framework for server-rendered React applications.

Next.js POWER !!!

  • Server-rendered by default
  • Automatic code splitting for faster page loads
  • Simple client-side routing (page based)
  • Webpack-based dev environment which supports Hot Module Replacement(HMR)
  • Able to implement with Express or any other Node.js HTTP server
  • Customizable with your own Babel and Webpack configurations

ปล. เขียน jsx นะฮ่ะะะ ควรจะมีพื้นฐาน React, NodeJS นิดหน่อยนะครับ :D

เริ่ม !!!

$ yarn init -y
$ yarn add next react react-dom

package.json

{
"name": "Next",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"next": "^3.0.6"
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}

สร้าง Folder ชื่อ pages *บังคับ ต้องตั้งชื่อนี้เท่านั้น เพพาะตัว Next.js ใช้ชื่อ pages ในการ Generate routing ขึ้นมา นั่นหมายความว่า เราจะไม่ต้องเขียน route นั่นเอง

Structure

- Next
- pages
- index.js
- package.json

ไหว้ครูกันก่อน :D

pages/index.js

const Index = () => (
<div> Hello Next.js xD </div>
)
export default Index

yarn run dev

$ yarn run dev

รันที่ http://localhost:3000

ไหว้ครูสำเร็จ xD

Routing

components/Header.js

สร้าง Header ไว้ก่อน

import Link from 'next/link'const linkStyle = {
marginRight: 15
}
const Header = () => (
<div>
<Link href="/">
<a style={linkStyle}>Home</a>
</Link
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
</div>
)
export default Header

components/Layout.js

แล้วแปะ Header เข้าไปใน Layout

import Header from './Header'const layoutStyle = {
margin: 20,
padding: 20,
border: '1px solid #DDD'
}
const Layout = (props) => (
<div style={layoutStyle}>
<Header />
{props.children}
</div>
)
export default Layout

pages/index.js

แล้วเอา Layout ไปครอบไว้ในหน้าที่อยากจะใช้

import Layout from '../components/Layout'const Index = () => (
<Layout>
<p> Hello Next.js xD </p>
</Layout>
)
export default Index

pages/about.js

import Layout from '../components/Layout'export default () => (
<Layout>
<p> I'm About xD </p>
</Layout>
)

Structure

- Next
- components
- Header.js
- Layout.js
- pages
- about.js
- index.js
- package.json

ไม่ต้องเขียน Route สักแอะ EZ !!

Clean url

มันคือการ pass get params ไปเป็น path params นั่นแหละ คือมันไม่ต้องเขียน routing อะนะ ก็เลยต้องส่ง get params ไปแทน แล้วค่อยให้ server render ใหม่ให้อีกที มันจะได้ clean url ที่ไม่ใช่ get params

pages/index.js

import Layout from '../components/Layout'
import Link from 'next/link'
const PostLink = (props) => (
<li>
<Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
<a>{props.title}</a>
</Link>
</li>
)
const Index = () => (
<Layout>
<h1>
My blog
</h1>
<ul>
<PostLink id="hello-nextjs" title="Hello Next.js"/>
<PostLink id="learn-nextjs" title="Learn Next.js Magic !"/>
<PostLink id="build-nextjs" title="Build"/>
<PostLink id="deploy-nextjs" title="Deploy With Zeit"/>
</ul>
</Layout>
)
export default Index

pages/post.js

import Layout from '../components/Layout'export default (props) => (
<Layout>
<h1>{props.url.query.title}</h1>
<p>Blog content xD !!</p>
</Layout>
)

Structure

- Next
- components
- Header.js
- Layout.js
- pages
- about.js
- post.js
- index.js
- package.json

Server

$ yarn add express

server.js

const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = express()
server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { title: req.params.id }
app.render(req, res, actualPage, queryParams)
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err)
throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})

package.json

{ ...
"scripts": {
"dev": "node server.js"
}
}

ไว้มาต่อ Part 2 อิอิ

References

https://learnnextjs.com/

https://github.com/zeit/next.js

)

Pozterz

Written by

Pozterz

Lv.25 Full Stack Pokemon @Pi R Square

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade