A simple and easy boilerplate for your next NextJS project, to get you started in NO time.
Install the dependencies real quick:
npm install
# or
yarn installFirst, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.jsx. The page auto-updates as you edit the file.
API routes can be accessed on
http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.jsx.
The pages/api directory is mapped to /api/*. Files in this directory are treated as
API routes instead of React pages.
This section is aimed to make you familiar with the structure, and how to quickly get up and started.
This project has SCSS for styling and ESLint, Prettier, SCSS linting setup for code, This code has been linted now, and you're free to use it or remove it as per your need.
This project has the following structure and folders to organize and quickly add files and start
-
pages/folder contains the rendering files with support for auto routing, That is if you havepages/test.jsx, It'll point towards/test. -
styles/folder contains all the SCSS (aka SASS) stylesheets for styling pages. Make files with the naming convention of<filename>.module.scsswith First letter of filename capital. You can also do<filename>.component.scssfor the components you're using. -
public/folder contains the images and static assets, other than styling files. If you want to use an image, Here's How you can do it:<Image src="/test.png" alt="test" />withtest.pngbeing an existing image in thepublic/folder. -
components/folder contains the various components which can be reused over several places / pages, and keeps the code DRY. It already has aLayout.jsxfile, containing the navbar and footer linked by default. It has the following contents:<Navbar />; { children; } <Footer />;
Meta tags and components is also located in the components. You can adjust to add / remove things as you need it, and if you want to then customize the props and the things, visit
pages/_document.jsxand edit them.This is applied to all the pages, and has a Navbar and Footer as designed in the components' folder. Change them to have them applied, or leave them to keep them empty. More info about it below.
-
utils/folder contains the utility methods for the project.
In components/ folder, we'll have a layout Components which will return following things:
<Navbar />;
{
children;
}
<Footer />;To have navbar, footer for each page, we'll add them, Remember Navbar.jsx and Footer.jsx are
components too in components folder, which we import in Layout.jsx and use, Then in pages/_app.jsx
which contains the basic structure of an App.
By default, it's like this
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};And after having the layout attribute, it'll be like this
return (
<Layout>
<Component {...pageProps} />
</Layout>
);And Layout.jsx is like this:
return (
<div>
<Navbar />
{children}
<Footer />
</div>
);Children being the page's content, whichever thing is between nav and footer and Navbar and footer to keep things DRY.
Edit the Navbar.jsx and Footer.jsx to update the Navbar and Footer, As the layout is defined,
they're Auto added to all the pages.
There is also configuration added for document in pages/_document.jsx, which also has configuration for the HTML pages
to be rendered. You can add things or remove things from the tags in <Head /> or <Body /> section as per your needs
allowing you to freely change how the template is going to be rendered or customized.
This is a way to integrate things quickly into the project with the help of a simple script. I have provided a script
called scaffold.js to do the scaffolding, and it supports only CSS frameworks as of now. It's pretty easy to get
started by integrating CSS frameworks in the projects. Here's the command to do that: node scaffold.js <CSS-FRAMEWORK>
And It will auto integrate the things as needed in the project.
- First, install the bootstrap library
npm install bootstrap@next # or yarn add bootstrap@next - Then, finally add the Bootstrap components in the
globals.cssfile, Add the following line to the top of the file:@import "~bootstrap/scss/bootstrap";
- Get started by installing the dependencies first:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- Next, generate your
tailwind.config.jsandpostcss.config.jsfiles:npx tailwindcss init -p
- Replace the following line, to purge redundant CSS when building the app:
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'] - Finally Add Tailwind directives in
globals.css@tailwind base; @tailwind components; @tailwind utilities;
-
First, install the Bulma library
npm install bulma # or yarn add bulma -
Then, finally add the Bulma components in the
globals.cssfile, Add the following line to the top of the file:@import '~bulma/bulma';OR, use this if you want to import everything:@import '~bulma/bulma'; @import '~bulma/sass/grid/columns.sass'; @import '~bulma/sass/layout/section.sass'; @import '~bulma/sass/layout/footer.sass';
Docker is an easy way of containerizing and delivering your applications quickly and easily, in a convenient way. It's really simple to get started with this, with docker handling all the installation and other tasks. You need docker and docker-compose in order to run this.
Run docker-compose up after getting the project and config ready.
Docker mini guide:
- Running the App:
docker-compose up --build - Stopping the App:
docker-compose down - Rebuilding the App:
docker-compose build
Contributions, issues and feature requests are welcome. After cloning & setting up project locally, you can just submit a PR to this repo, and it will be deployed once it's accepted.
We love people's support in growing and improving. Be sure to leave a ⭐️ if you like the project and also be sure to contribute, if you're interested!
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
Made by janaSunrise with ❤