- Focus on Content
- Focus on UI/UX
- Focus on Performance
- Focus on Intuitive Layout
- Focus on Maintanance
- Focus on Customizability
Visit Next Your Home Guide built with this template
- Language π
typescript
- Framework βοΈ
NextJs
- Styling π
styled-components
- Markup π
mdx
- π More than
markdown
, it's rich - π Use
javascript expressions
- π Use
JSX
- π Explore more features on official MDX site
- π More than
mdx-bundler
- π¦ Import pure
react component
in.mdx
post files - π Visit mdx-bundler for more config options
- π¦ Import pure
- π You know
react
- π Zero env configuration
- π Easy deploying via
vercel
(Power of vercel + NextJs π) - π¦ Easy posting with built in CLIπ tool
- π Light house score
100
- π SEO support with
next-seo
(More info about this package π) - π Bundle size optimized
Preact
on production build (3kb
) (What is Preact? π)- etc...
- π Category based grouping
- And you can describe the category
- π Category pagination
- Configurable with
blog.config.ts
- Configurable with
- π Post series
- Group your post by subtitle
- π Intuitive UI Elements
- π Easy navigation with
post controller
- π Less vertical scrolling for searching post
- π Device width based, sized text content
- π You can set color for each category and post
- π Your personal color will be adapted
- π Different, but consistent design
- π
Light
/Dark
mode full support - π Intergrate Profile with full feature of
mdx
- π Table of content on
desktop
/mobile
(optional on mobile) - π Image optimization with
next/image
(More info about next/image π) - π Automatic image size support for
static
/external
- π Automatic pagination
- π Recover scroll position when navigating to previous page
- π Analyze visitors with
Google Analytics
! Run it on thepartytownπ
thread and get the performance (partytown? π) - π Support
sitemap
,rss
generation on build - π Math
katex
support (optional) - π Automatic post refreshing in
dev
mode - π Specific
error
informations about blog posts - π Decent
code
block with code copybutton
- etc...
-
Click
Use this template
button in this page and make ownrepo
with1commit
- Get this
repo
to yourlocal
development env
- Get this
-
Install packages
pnpm i
-
this project use
pnpm
for package managing -
if
pnpm
is not installed, visit pnpm install guidenpm install -g pnpm
-
-
Update π
blog.config.ts
, πpublic/robots.txt
blog.config.ts
:authorInfo
- name
- currentState
- currentGoal
- contacts
blogInfo
- url: deploy url
- siteName
- subtitle
- language
- at
public/robots.txt
:- update
Sitemap
to your deploy url
- update
-
Dev test
pnpm dev
port
3000
will be used by default -
First post
pnpm post
-
Build test
pnpm build
build result in
.next
folder -
Deploy with
vercel
-
make account
-
choose blog repo
-
follow vercel deploy step or click
deploy
button below
-
- Check config options in
blog.config.ts
- Easy to customize
- π You know
react
- π You know
styled-components
- π Just modify the style that you want to
- π You know
- Whole project includes
README.md
about structures and description
π€ Why not use gatsby
?
-
Stricter than
NextJs
-
Use
graphql
for content api- just use
typescript
- for the people don't know about
graphql
- just use
-
Rely on
gatsby
community to implement some feature
π€ How much fast you mean?
-
Run pagespeed test
desktop
result:100
/100
/100
/100
mobile
result:100
/97
/100
/100
-
Run Webpage Test: pretty good
-
Check build
bundle size
result belowPage Size First Load JS β β / 1.46 kB 91.1 kB β /_app 0 B 70.3 kB β β /[category] 748 B 90.4 kB β β /[category]/[pageNumber] 832 B 90.5 kB β β /[category]/[pageNumber]/[postTitle] 1.64 kB 96.8 kB β β /404 269 B 70.6 kB β β /500 269 B 70.6 kB β β /category 3.21 kB 78.1 kB β β /profile 2.68 kB 89 kB + First Load JS shared by all 70.3 kB β chunks/main-be00b42900d433cc.js 36.8 kB β chunks/pages/_app-764e610a6d9ea0f7.js 32.7 kB β chunks/webpack-3373b0f21806983f.js 827 B β css/a36597fbcc4c45ff.css 813 B
const LICENSE = "MIT π"
const KOR = "κ°μ¬ν©λλ€ π"
const ENG = "Thanks π"