In the previous chapter, I introduced to you some of the downsides of modern React architecture and how Nextjs can help us eliminate them
In this chapter, I’ll show you how to quickly and reliably setup a Nextjs project with Typescript.
Why Typescript ????
Many people say that Typescript is unnecessary, why do we have to choose sth more complicated for our job ? I used to think like that too. But after working with TS for nearly a year, I found that it bring so many good things to my job:
. TS starts from the same syntax of JS => It will not require to much effort to grasp
. TS compiles to clean, simple JS code which can run on any browser or Nodejs engine
. The Type System of Typescript => Help your code more readable and understandable => Reduce hidden bugs and gain better insight into the behavior of existing code (This will be huge beneficial if you are new to a pretty large code base)
. TS always offer support for the latest JS features
create-next-app
“create-next-app” is a CLI tool, created by Zeit (The creator of NexJS). It’s a straightforward tool to start a NextJS project without any headache.
You can use “create-next-app” to start a NextJS project with most of React library these day (Nextjs supports many React libraries like Redux, Mobx, Google material design, Ant Design, …)
With “create-next-app” you can for get about those pain in the ass when set up a new project from scratch and just focus more on writing your code.
To install create-next-app, open your favorite terminal and type:
This command will install create-next-app globally on your computer. Verify your installation by typing:
If you see create-next-app version similar to the above image then we are good to go.
Start a Nextjs project with Typescript
Now we have “create-next-app” install, we will create a Nextjs project with Typescript. Simply run this command on your terminal (don’t forget to replace “app-name” with your project name):
This will create a folder “app-name” on computer which contains all of our boilerplate code. Let’s go inside this folder to see what we’ve got.
Nextjs special folders + files
*/pages*
Nextjs supports Routing out of the box so you don’t have to setup a routing library like react-router or so. Routing in Nextjs base on the file system inside a special folder name ‘pages’.
Inside “/pages”, “/pages/index.ts” will map to the “/” route and “/pages/about.ts” will map to the “/about” route on your site. To put it simple, each file in this folder correspond to 1 page in your site.
To my opinion, if you use Redux/Rematch to manage your app state => these pages is the perfect place to connect to your store. I consider these pages as “smart components” if you follow the “smart vs dumb components” architecture.
*/static*
The second special folder you need to be aware of is “/static”. This folder is used for serving static files by Nextjs. This happen by default so you don’t have to do any setup.
To display an image on your site, simply put the image some where inside “/static” and use it on your page:
*next.config.js + .babelrc*
These 2 files will be used to customize Webpack and Babel configurations. Just install any Babel or Webpack plugins you wanna use in your project and put there settings in one of these 2 files.
With default Webpack + Babel configs of Nextjs we already have automatic transpiration and bundling + hot code reloading.
This is everything you need to get started with a Nextjs project. You are free to choose any folder structure you like for your project except these special ones.
How I organize my components
For components in my app, I’ll put them in a folder call “/components”.
My idea of organizing components inside this folder is base on a React app structure call “Fractal”. You can read more about it here: Factal
For each page I have inside “/pages”, I’ll have a folder with the same name inside “/components”. This folder will house all of the page’s components. If any components in “/components/page-name” have sub components, I’ll create a subfolder and put them there.
For common components that can be used in many places like Button, Input, … I’ll put them into a folder call “/components/commons”, and for Layout components I’ll put to “/components/layout”.
This way of organizing components works pretty well for me, even on large project and by organizing components this way, your app can scale for infinite in the future.
Conclusion
These above tips are my experience after a few project with Nextjs. Go experiment and find out what really works for you. Happy coding !!!