{"id":70,"date":"2023-10-27T11:28:03","date_gmt":"2023-10-27T10:28:03","guid":{"rendered":"https:\/\/www.web31231374.lab1.almamater.si\/?p=70"},"modified":"2023-10-27T12:12:53","modified_gmt":"2023-10-27T11:12:53","slug":"next-js","status":"publish","type":"post","link":"https:\/\/www.web31231374.lab1.almamater.si\/?p=70","title":{"rendered":"Next.js"},"content":{"rendered":"\n

Brief Overview<\/strong><\/h2>\n\n\n\n

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.<\/p>\n\n\n\n

\n

Read more about React in my other post<\/a><\/h3>\n<\/div>\n\n\n\n

Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.<\/p>\n\n\n\n

Whether you’re an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.<\/p>\n\n\n\n

Installation<\/strong><\/h2>\n\n\n\n

We recommend starting a new Next.js app using create-next-app<\/a><\/code>, which sets up everything automatically for you. To create a project, run:<\/p>\n\n\n\n

npx create-next-app@latest<\/code><\/pre>\n\n\n\n
On installation, you’ll see the following prompts:<\/p>\n\n\n\n
What is your project named? my-app\nWould you like to use TypeScript? No \/ Yes\nWould you like to use ESLint? No \/ Yes\nWould you like to use Tailwind CSS? No \/ Yes\nWould you like to use `src\/` directory? No \/ Yes\nWould you like to use App Router? (recommended) No \/ Yes\nWould you like to customize the default import alias (@\/*)? No \/ Yes\nWhat import alias would you like configured? @\/*<\/code><\/pre>\n\n\n\n
After the prompts,\u00a0create-next-app<\/code>\u00a0will create a folder with your project name and install the required dependencies.<\/p>\n\n\n\n
Key Features<\/strong><\/h2>\n\n\n\n
    \n
  • Page-based routing system<\/strong> (with support for dynamic routes): With NextJS, we don’t need to care about writing a code for routers for the pages. We create a page in a special folder, and NextJS provides it with routing, simple as that \ud83d\ude42<\/li>\n\n\n\n
  • Pre-rendering<\/strong>: both static generation (SSG) and server-side rendering (SSR) are supported. Server-side rendering (SSR) prepares the content of a page on a server, while a one-page React application uses client-side rendering (CSR). The problem with CSR is that it’s not SEO-friendly because search engines will not see the page’s actual content. Using SSR in NextJS can avoid such issues as a flickering page while data fetching, and our website content will be SEO friendly.<\/li>\n\n\n\n
  • Built-in CSS and Sass support<\/strong>: and support for any CSS-in-JS library<\/li>\n\n\n\n
  • Full-stack capabilities<\/strong>: NextJS makes it easier for React developers to add backend code to the project. It is very easy to add our code for storing data, getting data, authentication, etc.<\/li>\n\n\n\n
  • Static Exports<\/strong>: Using the next export command, Next.js allows you to export a fully static site from your app.<\/li>\n\n\n\n
  • Dynamic components<\/strong>: We can also import javascript modules and React components dynamically.<\/li>\n\n\n\n
  • Prefetching<\/strong>: The Link component, used to link different pages, supports a prefetch prop that automatically prefetches page resources (including code missing due to code splitting) in the background.<\/li>\n<\/ul>\n\n\n\n
    Conclusion<\/strong><\/h2>\n\n\n\n
    Next.js is a powerful React framework that simplifies the process of building full-stack web applications, offering numerous features and optimizations. It abstracts the complexities of React tooling, allowing developers to focus on creating user interfaces and application logic without the burden of intricate configuration.<\/p>\n\n\n\n
    One of Next.js’s standout features is its seamless and efficient page-based routing system, which eliminates the need for manual router code. Additionally, Next.js supports pre-rendering, including static generation (SSG) and server-side rendering (SSR), making your applications both performant and SEO-friendly. SSR, in particular, ensures that search engines can index your content without the drawbacks of client-side rendering (CSR).<\/p>\n","protected":false},"excerpt":{"rendered":"
    In this post, we’ll take you on a journey through the world of Next.js, exploring its core concepts, key features, and the reasons why it’s shaping the future of web development.<\/p>\n","protected":false},"author":1,"featured_media":79,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/posts\/70"}],"collection":[{"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=70"}],"version-history":[{"count":8,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/posts\/70\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/posts\/70\/revisions\/96"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=\/wp\/v2\/media\/79"}],"wp:attachment":[{"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.web31231374.lab1.almamater.si\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}