Travel Blog
This is a Next.js project bootstrapped with create-next-app
.
- Make sure to setup git-lfs before cloning
- Switch to correct node version
- Install dependencies
- Pull the latest
env
variables from vercel - Run the development server
# Install git-lfs using whatever tool makes sense for your OS
brew install git-lfs
git lfs install
nvm use
npm i
npx vercel env pull
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying src/app/index.tsx
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in src/app/api/hello.ts
.
The src/app/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
This is the existing blog-starter plus TypeScript.
This example showcases Next.js's Static Generation feature using Markdown files as the data source.
The blog posts are stored in src/_posts
as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.
To create the blog posts we use remark
and remark-html
to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter
and also sent in props to the page.
https://next-blog-starter.vercel.app/
Deploy the example using Vercel or preview live with StackBlitz
- WordPress
- DatoCMS
- Sanity
- TakeShape
- Prismic
- Contentful
- Strapi
- Agility CMS
- Cosmic
- ButterCMS
- Storyblok
- GraphCMS
- Kontent
- Umbraco Heartcore
- Builder.io
- TinaCMS
- Enterspeed
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example blog-starter blog-starter-app
yarn create next-app --example blog-starter blog-starter-app
pnpm create next-app --example blog-starter blog-starter-app
Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.
Deploy it to the cloud with Vercel (Documentation).
blog-starter
uses Tailwind CSS (v3.0).