{"id":77,"date":"2023-05-12T11:30:36","date_gmt":"2023-05-12T11:30:36","guid":{"rendered":"https:\/\/coderexception.com\/?p=77"},"modified":"2023-09-29T06:38:45","modified_gmt":"2023-09-29T06:38:45","slug":"first-project-in-nextjs","status":"publish","type":"post","link":"https:\/\/coderexception.com\/first-project-in-nextjs\/","title":{"rendered":"First Project in Nextjs"},"content":{"rendered":"\n<p>In this article, I have explained how I created my first project in nextjs. My first project was a simple web page created using nextjs and tailwindcss. I have learned coding online through&nbsp;<a href=\"https:\/\/www.freecodecamp.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>freeCodeCamp.org<\/strong><\/a>. Due to a lack of experience, I faced an array of obstacles during creating my first project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tutorials I followed<\/h2>\n\n\n\n<p>I usually watch tutorials from Traversy Media or freecodecamp.org. The first video I watched was a crash course on nextjs by <strong>Traversy Media<\/strong> this tutorial gave me in-depth knowledge of nextjs.<\/p>\n\n\n\n<p>And the second tutorial I watched was a crash course on tailwindcss by <strong>Traversy Media<\/strong> this one was also a fantastic tutorial and describes well about tailwindcss.<\/p>\n\n\n\n<p>After watching these tutorials I was motivated enough that now I can build my first project in nextjs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How I Picked a Design<\/strong> <strong>for the first project<\/strong><\/h3>\n\n\n\n<p>It was quite simple for me to choose a design I searched on Google for free Figma templates and picked one of them. The template I picked was <a href=\"https:\/\/www.figma.com\/community\/file\/1041354905405268202\/Digital-Marketing-Website\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Digital-Marketing-Website<\/strong><\/a>. There was also an option to open in Figma I opened it by logging in to Figma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>My Plan for the first project<\/strong> <strong>in nextjs<\/strong><\/h3>\n\n\n\n<p>First of all, break down the whole project design into three sections:<\/p>\n\n\n\n<ul>\n<li>Navbar \/ Header<\/li>\n\n\n\n<li>Main<\/li>\n\n\n\n<li>Footer<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Let&#8217;s Create my first project in the code editor<\/strong><\/h3>\n\n\n\n<p>I usually use vs code for coding. I have created my next-app by running <\/p>\n\n\n\n<pre title=\"Terminal\" class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash line-numbers\">npx create-next-app@latest\n \nyarn create next-app\n \npnpm create next-app\n<\/code><\/pre>\n\n\n\n<p> the command in the terminal of vs code. <\/p>\n\n\n\n<p>After running the above command I answered the following prompts:<\/p>\n\n\n\n<pre title=\"Terminal\" class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash line-numbers\">What is your project named?  my-app\nWould you like to add TypeScript with this project?  Y\/N\nWould you like to use ESLint with this project?  Y\/N\nWould you like to use Tailwind CSS with this project? Y\/N\nWould you like to use the `src\/ directory` with this project? Y\/N\nWhat import alias would you like configured? `@\/*`<\/code><\/pre>\n\n\n\n<p>After answering the prompts, my project is created with the correct configuration depending on my answers. <\/p>\n\n\n\n<p>Now I can run my next-app (my-app) on the local server by running the command below <\/p>\n\n\n\n<pre title=\"Terminal\" class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run dev<\/code><\/pre>\n\n\n\n<p>above command will run your project on the local server. Now I can see my first project on localhost:3000.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Framework<\/h2>\n\n\n\n<p>I have learned just one CSS framework which is Tailwindcss. I have installed this framework in my next-app by using the commands below<\/p>\n\n\n\n<pre title=\"Terminal\" class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install -D tailwindcss\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n<p>the above commands will create a tailwind.config.js file.<\/p>\n\n\n\n<pre title=\"tailwind.config.js\" class=\"wp-block-code\"><code lang=\"json\" class=\"language-json line-numbers\">\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n  content: [\n    \".\/src\/**\/*.{js,jsx,ts,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n<p>now add the above content in the tailwind.config.js file. After that <\/p>\n\n\n\n<pre title=\"globals.css\" class=\"wp-block-code\"><code lang=\"json\" class=\"language-json line-numbers\">@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n<p>add the above content in the css file in the react-app.<\/p>\n\n\n\n<p>Now run the build process by running the below command<\/p>\n\n\n\n<pre title=\"Terminal\" class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run dev<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Started coding<\/strong> <strong>for the first project in nextjs<\/strong><\/h2>\n\n\n\n<p>Create the file for the first section such as header.js in the src folder or depending on the folder structure and define a function inside as below<\/p>\n\n\n\n<pre title=\"header.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">const Header = () =&gt; {\n  return (\n        &lt;div&gt;\n              &lt;h1 className=\"text-3xl\"&gt;Hello World&lt;\/h1&gt;\n        &lt;\/div&gt;\n     );\n};\nexport default Header;<\/code><\/pre>\n\n\n\n<p>Now import the Header in your index.js file such as below<\/p>\n\n\n\n<pre title=\"index.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import Header from \"..\/Sections\/header.js\";\nexport default function Home() {\n  return (\n    &lt;div&gt;\n      &lt;Header \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Save the code in both files index.js &amp; header.js by using Ctrl + s shortcut it will save and now you will see the text &#8220;Hello World&#8221; on the local host.<\/p>\n\n\n\n<p>Worked hard and completed the first project in next.js by creating other components below header.js such as hero, icon, blog, services, social, email, etc. You can see the navbar &amp; hero section in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" alt=\"first project in nextjs\" src=\"https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/digital-marketing-website-five-vercel-app-1024x768desktop-28ff36-1-e1684493304364.jpg\" alt=\"digital marketing website image \" class=\"wp-image-90\" srcset=\"https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/digital-marketing-website-five-vercel-app-1024x768desktop-28ff36-1-e1684493304364.jpg 1024w, https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/digital-marketing-website-five-vercel-app-1024x768desktop-28ff36-1-e1684493304364-300x172.jpg 300w, https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/digital-marketing-website-five-vercel-app-1024x768desktop-28ff36-1-e1684493304364-768x440.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can check my first project in nextjs by clicking on <strong><a href=\"https:\/\/digital-marketing-website-five.vercel.app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Digital Marketing Website<\/a>.<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/Screenshot-1-1-1024x472.png\" alt=\"second web image\" class=\"wp-image-170\" width=\"730\" height=\"336\" srcset=\"https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/Screenshot-1-1-1024x472.png 1024w, https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/Screenshot-1-1-300x138.png 300w, https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/Screenshot-1-1-768x354.png 768w, https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/Screenshot-1-1-1536x708.png 1536w, https:\/\/coderexception.com\/wp-content\/uploads\/2023\/05\/Screenshot-1-1.png 1732w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Beginners guide<\/strong><\/h3>\n\n\n\n<p>If you are at the beginner stage the qualities you need and are essential for learning development are you should have a forever learning attitude, be hard working, stay motivated, have logical thinking, be patient, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Experience<\/strong><\/h3>\n\n\n\n<p>Some essential thing that I have learned through my first project in nextjs is to make a plan before starting any project. It is a better approach to learning and practicing a skill by creating small projects to become a professional developer. After this project, I felt problem-solving skill is essential for everyone in the field of development\/coding.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, I have explained how I created my first project in nextjs. My first project was a simple web page created using nextjs&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[1],"tags":[],"taxonomy_info":{"category":[{"value":1,"label":"Uncategorized"}]},"featured_image_src_large":false,"author_info":{"display_name":"Anas Kiani","author_link":"https:\/\/coderexception.com\/author\/anaskiani\/"},"comment_info":0,"category_info":[{"term_id":1,"name":"Uncategorized","slug":"uncategorized","term_group":0,"term_taxonomy_id":1,"taxonomy":"category","description":"","parent":0,"count":6,"filter":"raw","cat_ID":1,"category_count":6,"category_description":"","cat_name":"Uncategorized","category_nicename":"uncategorized","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/posts\/77"}],"collection":[{"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":29,"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/posts\/77\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderexception.com\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}