Winner Musole Masu

Posted on Oct 25, 2021 • Edited on Nov 15, 2021

Let’s build and deploy a Full Stack Next.js App: Part 1

#nextjs #tailwindcss #mongodb #webdev

Next.js is referred to as the React framework for production, which comes with more features than simple React as a library. It gives us rules and guidelines on how we should structure our projects and it improves React developers' life, with built-in features like file-system based routing or “head” metadata for SEO.

In this article, we will build a simple food app that displays menu. It will be styled with Tailwind Css in the first part, and in the coming parts, we will connect the app to a MongoDB database and deploy it on Vercel.

Prerequisites

For the tutorial to go well, you must have basic knowledge of Node js and React and have either a GitHub / Bitbucket / Gitlab account. You need also to have at least Node js 14.18.1 LTS and Git installed on your computers.

1. Let's start a new project

All the prerequisites are met, open your terminal and create a new project;

Run the three commands below, to create a new project directory and set up a new "package.json" file :

$ mkdir next-food-app
$ cd next-food-app
$ npm init -y

Next step, in the project directory, install react and react-dom as dependencies, Next.js requires them as peer dependencies:

$ npm install react react-dom

Free from npm warnings, you can now install Next.js, run:

$ npm install next

Open the "package.json" file, in the scripts section, replace the actual code by the one below :

 "scripts": {
   "dev": "next",
   "build": "next build",
   "start": "next start"
 },

Back to the project directory, create a folder named “/pages” and inside “/pages” create a file named “index.js” :

Note: Next.js comes with the file-system based routing feature, which makes all files added to the “/pages” directory available as routes. All files except “index.js”, which the Router automatically routes to the root of the directory.

/pages/index.js => /
/pages/meals/index.js => /meals
/pages/meals.js => /meals

Great, in the "/pages/index.js" create the application HomePage with the following code :

const HomePage = () => {
  return <h1>Welcome to our Food Next.js App &#x1F60a;</h1>;
};
export default HomePage;

Now, go to your the terminal, in the project directory, run the command below and on your browser open http://localhost:3000 :

$ npm run dev

You will get the same page on your browser if nothing was omitted.

2. Let's add Tailwind css

First step here is to install tailwindcss in the project, you will do so by running the following command in the project directory:

$ npm install tailwindcss postcss autoprefixer

Next, generate “tailwind.config.js” and “postcss.config.js” files with this command in the project directory:

$ npx tailwindcss init -p

Open the “tailwind.config.js” file and replace all code in there by these:

module.exports = {
 purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 darkMode: false, // or 'media' or 'class'
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
};

In the project directory, create a folder named "/public", inside "/public", create another folder named "/style" where you will add a file named "global.css" and put the code below in it:

@tailwind base;
@tailwind components;
@tailwind utilities;

After, import your style in your Javascript: To do so, create inside the “/pages” directory, a file named “_app.js”.

Note: In Next.js the file "_app.js" in the "/pages" directory overrides the default “App” component that allows us to add global css to the whole application.

import "../public/style/global.css";

const MyApp = ({ Component, pageProps }) => {
 return <Component {...pageProps} />;
};
export default MyApp;

Put the code above in your "_app.js" file, run $ npm run dev and open your browser on http://localhost:3000 .
If the procedure was followed correctly, you will notice a difference with the text font between the project before and after tailwind css. Just like in the images below;

Before

After

3. Finally, let’s add React components

Note: Next.js is built on top on react, therefore react components are part of it.

In the project directory, create a folder named "/components", and add two js files respectively named “MealList.js” and “MealItem.js”.
Drop the code below in “MealItem.js”:

const MealItem = () => {
  return (
    <div className="w-1/4 p-8 shadow-lg rounded-lg bg-yellow-50">
      <img src="/img/meal1.PNG" className="w-auto h-auto" alt="Chicken Salad" />
      <div className="text-center py-2">
        <h3 className="text-xl font-normal">
          Chicken Salad
          <span className="px-3 font-light text-yellow-500">(4 dishes)</span>
        </h3>
        <p className="text-gray-500 text-base">Herico de Porto</p>
        <button className="bg-yellow-500 px-4 py-2 rounded-lg text-gray-50 font-medium mt-2">
          Details
        </button>
      </div>
    </div>
  );
};
export default MealItem;

And drop this in “MealList.js”:

import MealItem from "./MealItem";
const MealList = () => {
  return (
    <div className="flex flex-wrap">
      <MealItem />
    </div>
  );
};
export default MealList;

Import your react components in the Homepage “/pages/index.js” : Delete all code in there and put the code below:

import MealList from "../components/MealList";
const HomePage = () => {
  return <MealList />;
};
export default HomePage;

Download the image found on this link -> https://github.com/musole-masu/nextjs-food-app/blob/main/public/img/meal1.PNG
Create in the "/public" directory a folder named "/img" and put the downloaded image in there.
Now, wrap your pages with the style added in the "_app.js" just like it's done below:

import "../public/style/global.css";

const MyApp = ({ Component, pageProps }) => {
  return (
    <div className="max-w-7xl mx-auto py-40">
      <Component {...pageProps} />
    </div>
  );
};
export default MyApp;

In your terminal, in the project directory, run $ npm run dev, then go to http://localhost:300

If you have this exact page on the browser, it means that you have completed each step of this tutorial correctly. Congrats :)

4. Conclusion

The Part 1 of our tutorial ends here. To summarize, it was focused on the project creation, with the installation of dependencies and also focused on styling.
Part 2 will be published very soon, so stay tuned and follow me on Twitter for updates.

Find the completed project here.

À bientôt