Next js 13 hands on impressions

Next js 13 hands on

Next js is a one the most popular web frameworks that use react and it is also my favorite framework to build a website. Next js helps speeding up time to start a new website development. They have released a new version 13 since a few months ago which introduces many cool things like server components, app folder, layout, template and many performance improvements. I was very eager to try out the latest version and have spent a few days to work on a clone of instagram using next 13 to understand the new things of next js. I mainly use their new beta features with app folder so my experiences will be about the beta features mostly. Now lets find out new things.

New features

App folder

this is the easiest to spot out feature which is mentioned early in the Next js presentation about the new version. Basically we have a new way of organizing our code in a next js project.

Thoughts

I think this is a good change since many mono repo tools call the starting projects with apps like nx.

Routing, page.tsx

Routing in next 13 is not the same as the previous versions even it still bases on physical file paths. The main differences are about page.tsx and folders for slugs. So we have folders under app folder represents slugs in urls and page.tsx will handle rendering.

Thoughts

I have mixed feelings regarding folder structures. At first, I am very happy to have that since it will be more modular with folders and things belonging to pages in the same page like I can put components in the same place with the page. However I am now not sure if I should put components in the same folder as pages or separate them to components folder outside of app because if I put components in the same place as pages then I will have mixed lowercase and capitalized react components(page.tsx vs OtherComponents.tsx)

Server components

Yeah if you have worked with react recently then server components you probably have heard about, Next js usually is pioneer to experiment new things and server components is one of their new things. Server components are not something new in web development if you have worked with C#, Java,... but it is new to react and it brings performance benefits to our websites.

Thoughts

I have heard many thoughts about server components that we are going back to ten years ago with server components since it is not different from mvc, asp.net,... I am on the other side regarding server components, to me server components is a positive feature that will help to reduce bundle sizes and hydrations. To me the main difference of server components comparing with other existing web frameworks is about coding experience. With server components we can still use react in almost the same way with react for client.

Client components

Together with server components we have client components. Client components are made for interactions so incase you need to listen on events or do things on client side the client components is your choice. Client components are marked with "use client"

Thoughts

It might be confusing in the beginning to choose between client components and server components, luckily next js provides good enough eslint rules and error messages if you use wrong type. Basically always start with server components and when you need to interact with somethings from browsers then turn your components into client. Client components will be rendered the same way as before which means hydrations will be applied. However I am not sure about complex projects if there will be any confusions between client components and server components since they are very similar but very different in the way of where the code will be run.

Another thing with client components is that it cannot use server components so if we have a component that is shared between server and client than this component will be client.

Layout

as the name already describes, Layout is a server component that can be used to share skeleton of pages. Layouts do not preserve states and will be inherited in child folders.

Beside layouts we have other conventional components like template, loading, error

Thoughts 

with a bunch of conventional components like layout, template,... Next js becomes more and more convenient to develop user friendly and we have an unified way to take care all aspects of web development from the basic level like rendering to advanced level like loading, error handlings,..

Data fetching

We have fetch and the new hook use for client side. Here we have another difference between server components and client components. With server components you can have async to component declarations. For client components, you will need suspense.

Thoughts

it is neat to be able to return async components on server and loading is handled by loading components.

Problems during hands on

• Build pages that use internal api. I could not build pages that use internal api due to the fact that api is not ready. I think I need to implement getStaticProps as I read some where on internet
• Set props to layout, during development I have a need of setting selected menu item from a page and menu item is in layout, this need basically is impossible, I need to change the menu component to client component so I use usePath to determine selected menu item

Animations

I have not tested animations when moving between pages, but I think this can be done in templates. the code I did for testing next js 13 can be found here https://github.com/dukemai/instagram-tailwind