17
Let’s build and deploy a Full Stack Next.js App: Part 1
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.
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.
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 😊</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.
- 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
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 :)
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 
17