kate-varinda/nextjs-styled-components-starter

Nextjs and Styled-components starter template

Portfolio Starter Kit

This portfolio is built with Next.js and a library called Nextra. It allows you to write Markdown and focus on the content of your portfolio. This starter includes:

• Automatically configured to handle Markdown/MDX
• Generates an RSS feed based on your posts
• A beautiful theme included out of the box
• Easily categorize posts with tags
• Fast, optimized web font loading
• Initialized with styled components

Setup

• Have node, and npm installed
• Install yarn: npm i --global yarn
• Clone this Repo: git clone https://github.com/DrewBefore/Nextjs-styled-components-starter.git

Install and run the project

• From terminal, cd into the project folder, and run yarn
• Then run yarn dev
• Open browser to http://localhost:3000/
• Navigate to http://localhost:3000/about/
• Try adding new styled components, modifying existing components, and customizing this page.

Optional configuration

1. Update your name in theme.config.js or change the footer.
2. Update your name and site URL for the RSS feed in scripts/gen-rss.js.
3. Update the meta tags in pages/_document.js.
4. Update the posts inside pages/posts/*.md with your own content.

About Next.js Pages

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Example: If you create pages/about.js that exports a React component like below, it will be accessible at /about.

function About() {
  return <div>About</div>
}

export default About

Pages with Dynamic Routes

Next.js supports pages with dynamic routes. For example, if you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.

To learn more about dynamic routing, check the Dynamic Routing documentation.

Styled components

Learn more about styled components