Today I would like to share with you a minimally-styled Next.js Starter that I have created to help you scaffold your next single-page web project. It features a Navbar linked to 4 commonly-named sections, which you can fully customize yourself, as well as an animation component (Framer-motion) which you can use to reveal your HTML elements on-scroll.
You can view the github repository here:
https://github.com/EMurrell/next.js-singlepage-starter
And you can preview it here:
https://next-js-singlepage-starter.vercel.app
Like what you see so far? Then let's get started (this post assumes you are somewhat proficient or at least familiar with Next.js, TailwindCSS, Framer-motion and Node.js).
First thing's first, cd into your chosen directory and run the following command:
npx create-next-app [your-project-name] -e https://github.com/EMurrell/next.js-singlepage-starter
This will create a new Next.js application, using my repository as the example. Be sure to replace [your-project-name] with whatever it is you're going to call your project. You can also ditch the square brackets.
At first, you'll notice some warnings in your terminal as the files are downloaded. Don't worry, we'll install some dependencies and clear those right up for you. Once the downloads are finished, go ahead and cd into the project you just created.
Now run npm install in your terminal. This will setup the dependencies we'll need, including Framer-motion and react-intersection-observer (which we use to reveal HTML elements upon entering the viewport.)
Last but not least, run npm run dev to start up your development server, and head on over to localhost:3000 in your browser.
You'll notice that the navigation links collapse down to a hamburger-menu on any screen size smaller than "lg". You can change that through the CSS utility classes in the Navbar component.
Rename, add, or remove the sections that are defined in const links = [...], also in the Navbar component, as well as in the "components" folder at the root of the project. (The 'section' components are imported into the index.js file).
Also in the components folder is a component called FadeUp. You can wrap this component around an HTML element to make it "Fade up" into view. It is triggered on-scroll. Treat it in much the same way as you would with framer-motion's "motion.div"s. You can also customize the props values directly in the FadeUp.js file.
Alright there you have it. She ain't much to look at yet, that part's up to you. My intention for creating this starter was not to define the look of your project, but rather to save you some time and effort setting up some basic functionality.
Hope you enjoy playing around with it and creating your next amazing project. Thanks for reading!
Top comments (0)