This is a simple blog app built using Next.js. The app is created as part of the tutorial provided by Next.js.
The app includes the following features:
- Home page displaying a list of blog posts
- Individual blog post pages
- Searching post
To get started with the app, clone the repository and install the dependencies.
git clone https://github.com/emrecoban/nextjs-blog.git
cd nextjs-blog
npm install
Once the dependencies are installed, you can run the development server using the following command:
npm run devThe app should now be running on http://localhost:3000.
The app is built using the following technologies:
- Next.js
- React
Pagesdirectory: Pages are associated with a route based on their file name.next/link:Linking between pages in your application.next/image:Resizing & optimizing images.next/head:Adding metadatas.next/script:Loading third-party scripts such as analytics, ads.- CSS Modules: Allow you to locally scope CSS at the component-level by automatically creating unique class names.
pages/_app.js:A top-level React component that wraps all the pages in your application.clsxlibrary: In className property, it's like a if-statement - How to use.- Pre-rendering
- gray-matter: Lets us parse the metadata in each markdown file.
- getStaticProps
- getServerSideProps: If you need to fetch data at request time instead of at build time, you can try Server-side Rendering
- SWR: A React hook for data fetching.
- remark library: To render markdown content, we’ll use the remark library.
- date-fns library: To format the date, we’ll use the date-fns library.
- getStaticPaths: Define your paths auto.
This app was created as part of the tutorial provided by Next.js. The tutorial was very helpful in guiding me through the process of building a blog app using Next.js.
I hope you find this app useful in learning the basics of Next.js. If you have any questions or comments, feel free to contact me.