Posted on Sep 6 Add more directories and pagesMake directories: about, blog, projects under the app directory. Create a page.tsx in each directory. Since the layout is not changing you don’t need to have a layout.tsx file in each directory. Placeholder text is included for app/about/page.tsx.About Pageapp/about/page.tsxBlog Pageapp/blog/page.tsxProjects PageThis page contains three components.components/Fork.tsx which draws a fork.https://github.com/donnabrown77/developer-blog/blob/main/components/Fork.tsxcomponents/Star.tsx which draws a star.https://github.com/donnabrown77/developer-blog/blob/main/components/Star.tsxcomponents/Card.tsx which displays the Github project data display in a card. https://github.com/donnabrown77/developer-blog/blob/main/components/Card.tsxCard.tsx uses types created in the file types.d.ts in the root directory.You can provide a link to your github projects instead of accessing them this way but I wanted to display them on my website instead of making the users leave. You will need to generate a personal access token from github. The github token is included in the .env.local file in this format: GITHUB_TOKEN="Your token"Go to your Github and your profile. Choose Settings. It’s near the bottom of the menu. Go to Developer Settings. It’s at the bottom of the menu. Go to Personal access tokens.Choose generate new token ( classic ). You’ll see a menu with various permissions you can check. Everything is unchecked by default. At a minimum, you will want to check “public_repo”, which is under “repo”, and you’ll also want to check “read:user”, which is under “user.” Then click “Generate token”. Save that token (somewhere safe make sure it doesn’t make its way into your repository), and put it in your .env.local file. Now the projects should be able to be read with that token.More information: https://docs.github.com/en/[email protected]/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token.app/projects/page.tsxThis code checks for the github environment variable. If this variable is correct, it then creates a GraphQLClient to access the github api. The graphql query is set up to return the first 20 repositories by id, name, description, url, primary language, forks, and stars. You can adjust this to your needs by changing the query. The results are displayed in a Card component.Since we have not yet created a navigation menu type localhost://about, localhost://blog, localhost://projects to see your pages.Header, Navigation Bar, and Theme ChangerMake a directory called _data at the top level. Add the file headerNavLinks.ts to this directory. This file contains names of your directories._data/headerNavLinks.tsNow add:components/Header.tsxNext is the navigation bar.app/components/NavBar.tsxNow for the theme change code.app/components/ThemeChanger.tsxLinks to the svg components Hamburger, LetterX, Moon, Sun, LetterX :https://github.com/donnabrown77/developer-blog/blob/main/components/Hamburger.tsxhttps://github.com/donnabrown77/developer-blog/blob/main/components/LetterX.tsxhttps://github.com/donnabrown77/developer-blog/blob/main/components/Moon.tsxhttps://github.com/donnabrown77/developer-blog/blob/main/components/Sun.tsxNow set up the theme provider which calls next themes.app/components/Theme-provider.tsxapp/providers.tsxModify app/layout.tsx to call the theme provider.Add these two lines to the top:Wrap the calls to the providers around the call toIn tailwind.config.ts, after plugins[], add:darkMode: "class",Run npm dev. You should have everything working except the footer.For the footer, you can use the social icons here:https://github.com/donnabrown77/developer-blog/blob/main/components/social-icons/Mail.tsxI created a social-icons directory under app/components for the icons.The footer is a component:https://github.com/donnabrown77/developer-blog/blob/main/components/Footer.tsxFooter uses a file called siteMetaData.js that you customize for your site._data/siteMetData.jsNow add in app/layout.tsx, like this:SEONext JS 13 comes with SEO features.In app/layout.tsx, you can modify the defaults such as this:For the blog pages, add this to app/posts/[slug]/page.tsx. This uses dynamic information, such as the current route parameters to return a metadata object.Link to github project:https://github.com/donnabrown77/developer-blogSome of the resources I used:https://nextjs.org/docs/app/building-your-application/routing/colocationhttps://darrenwhite.dev/blog/nextjs-tailwindcss-theminghttps://nextjs.org/blog/next-13-2#built-in-seo-support-with-new-metadata-apihttps://darrenwhite.dev/blog/dark-mode-nextjs-next-themes-tailwind-csshttps://claritydev.net/blog/copy-to-clipboard-button-nextjs-mdx-rehypehttps://blog.openreplay.com/build-a-mdx-powered-blog-with-contentlayer-and-next/https://www.sandromaglione.com/techblog/contentlayer-blog-template-with-nextjshttps://jpreagan.com/blog/give-your-blog-superpowers-with-mdx-in-a-next-js-projecthttps://jpreagan.com/blog/fetch-data-from-the-github-graphql-api-in-next-jshttps://dev.to/arshadyaseen/build-a-blog-app-with-new-nextjs-13-app-folder-and-contentlayer-2d6hTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Thomas Ledoux - Sep 4 Ayoub - Aug 22 Victor Gerbrands - Sep 4 Bitsoft360 Reviews - Aug 28 Once suspended, dbrownsoftware will not be able to comment or publish posts until their suspension is removed. Once unsuspended, dbrownsoftware will be able to comment and publish posts again. Once unpublished, all posts by dbrownsoftware will become hidden and only accessible to themselves. If dbrownsoftware is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Donna Brown. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag dbrownsoftware: dbrownsoftware consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging dbrownsoftware will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.