Part 1 : Next.js ครั้งแรก
อยู่มาวันนึงก็โดนแนะนำให้มาลองเล่น 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-dompackage.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.jsonServer
$ yarn add expressserver.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
