This project is bootstrapped using Next.js, Typescript and TailwindCSS (optional).
To get started, clone this repo using git clone https://github.com/mrphemi/oval. Next run npm i or npm install to install all required dependencies (you need Node JS installed on your machine to run npm commands. See here to download and install Node JS on your machine).
After the installation is complete:
Run npm run dev to start the development server on http://localhost:3000
- Project folder structure
- Styling
- Analytics
- SEO setup
- Sitemap
- Prettier
- env variables
-
Pages directory: Since Next.js's router is file-system based, The folder Pages is a Next-specific directory to place routes or pages. For each route, you will have a separate file, which is named as the route. For example the file about.tsx in the pages directory will create the following route: https://domain.com/about. See docs for more details.
-
Public directory: Next.js uses this directory to statically serve files like the robots.txt or the favicon.ico. For more information on how to include these files here: official docs.
-
Components directory: Contains React components which can be reused across multiple pages.
Styling options include:
- Vanilla CSS
- Sass/Scss
- TailwindCSS. A utility-first CSS framework with pre-configured classes to create an API for the projects design system.
You can also use modular styling with css or scss.
We added functionalities for both Google Analytics and Fathom Analytics in this project, so you can choose one that's suitable for your project.
NB: Add your google or fathom analytics ids to the next.config.js file as environmental variables. Use identifiers/keys GOOGLE_ANALYTICS_ID for google analytics id and FATHOM_ANALYTICS_ID as env variable for fathom analytics.
We setup default seo using the next-seo package. You can add your site name, site title and site url as environmental variables under the next.config.js file. See the documentation on how to add seo bits on a per page basis.
We use the next-sitemap package to generate sitemap for different pages.
Prettier is a code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style.
It'll do things like adding a semicolon to the end of every statement, or make sure your indentation is consistent. The .prettierrc file at the project's root is in charge of customising Prettier and how it works. We recommend that you should not touch this file, to keep this configuration consistent through out the period of this project. VScode also has a Prettier extension, see how to install it here.
Create a .env.local file in your root folder and add your sensitive environmental variables to this file. For less sensitive environmental variables (like site URL and title), add them under the next.config.js file.
NB: Prefixing a env variable with NEXT_PUBLIC_ exposes it to the browser. See Next.js documentation.